HTML Video & Audio

<!-- Basic video player -->
<video src="movie.mp4" controls width="800">
    Your browser does not support the video tag.
</video>

<!-- Full attributes -->
<video
    src="movie.mp4"
    controls              <!-- Show play/pause/volume controls -->
    width="800"
    height="450"
    autoplay              <!-- Auto-play (muted by default in most browsers) -->
    muted                 <!-- Start muted -->
    loop                  <!-- Loop when finished -->
    poster="thumbnail.jpg" <!-- Poster image before playing -->
    preload="metadata"    <!-- none, metadata, or auto -->
>
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<video controls width="800">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogv" type="video/ogg">
    <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="subs_es.vtt" srclang="es" label="Spanish">
    Your browser does not support the video tag.
</video>

<!-- Format support:
MP4 (H.264)  — Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
WebM (VP9)   — Chrome ✅ Firefox ✅ Safari ✅ Edge ✅
OGV (Theora) — Chrome ✅ Firefox ✅ Safari ❌ Edge ✅
-->

<!-- Basic audio player -->
<audio src="song.mp3" controls>
    Your browser does not support the audio tag.
</audio>

<!-- Full attributes -->
<audio
    controls
    autoplay
    muted
    loop
    preload="metadata"
>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.wav" type="audio/wav">
    Your browser does not support the audio tag.
</audio>

<!-- Background audio (no controls) -->
<audio autoplay muted loop>
    <source src="background-music.mp3" type="audio/mpeg">
</audio>

<video controls>
    <source src="movie.mp4" type="video/mp4">
    
    <!-- Subtitles (can be toggled on/off) -->
    <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English" default>
    <track kind="subtitles" src="subs_es.vtt" srclang="es" label="Spanish">
    
    <!-- Captions (for deaf/hard-of-hearing) -->
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions">
    
    <!-- Chapter markers -->
    <track kind="chapters" src="chapters.vtt" srclang="en">
</video>

<!-- YouTube embed (responsive) -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video player"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
</div>

/* Make video responsive (maintains aspect ratio) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container video,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}