Project 7: Media Landing Page

Project 7: Media Landing Page

Let's hear it! A landing page with a video, an audio clip, an embedded video, and a details box.

Include all of these

<!-- Video -->
<video src="teaser.mp4" controls width="480" height="270"
  poster="poster.png">Your browser doesn't support video.</video>

<!-- Audio -->
<audio src="intro.mp3" controls>Your browser doesn't support audio.</audio>

<!-- Embedded YouTube -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" height="315" allowfullscreen></iframe>

<!-- Extra reveal -->
<details>
  <summary>Watch the behind-the-scenes</summary>
  <p>Extra detail hidden until opened.</p>
</details>

Gotchas

• controls shows the play bar; without it the media is invisible to users.
• <video> and <audio> keep fallback text for very old browsers.
• <iframe> embeds another page; add allowfullscreen for YouTube.

Checklist

• [ ] One <video> with controls
• [ ] One <audio> with controls
• [ ] One embedded <iframe>
• [ ] A <details> on the page
• [ ] A <progress> or <meter> somewhere

TL;DR

Media landing = video/audio/iframe + details + a progress bar. Controls matter.