Media Embedding

Learn to embed audio, video, and external content to create rich multimedia experiences.

Audio Player

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>
→
[Audio player with play/pause controls]

Key attributes:

  • controls - Shows player interface
  • autoplay - Starts automatically
  • loop - Repeats playback

Video Player

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support videos.
</video>
→
[Video player with playback controls]

Additional attributes:

  • poster="image.jpg" - Thumbnail image
  • muted - Start without sound
  • preload - Load strategy

YouTube Embeds

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>
→
[Embedded YouTube video player]

Best practices:

  • Always include title for accessibility
  • Set width and height
  • Use allowfullscreen for fullscreen viewing

Common Errors

<!-- Missing controls -->
<audio> <!-- No way to play -->

<!-- Incorrect YouTube URL -->
<iframe src="youtube.com/watch?v=...">

Practical Use: Product Demo

<div class="demo">
  <h2>Product Introduction</h2>
  <video controls poster="thumbnail.jpg">
    <source src="demo.mp4" type="video/mp4">
  </video>
  <h3>Testimonials</h3>
  <audio controls>
    <source src="feedback.mp3" type="audio/mpeg">
  </audio>
  <h3>See It in Action</h3>
  <iframe src="https://www.youtube.com/embed/abc123"></iframe>
</div>
→
[Product page with video demo, audio testimonials, and YouTube demo]

Your Task: Media Showcase

Create a page with:

  1. Audio player with controls
  2. Video player with controls
  3. Embedded YouTube video
Section 1/6Audio Player

Audio Player

Key attributes:controls - Shows player interfaceautoplay - Starts automaticallyloop - Repeats playback

Media Embedding

Learn to embed audio, video, and external content to create rich multimedia experiences.

Audio Player

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>
→
[Audio player with play/pause controls]

Key attributes:

  • controls - Shows player interface
  • autoplay - Starts automatically
  • loop - Repeats playback

HTML Editor

Preview