HTML Audio & Video
HTML5 Video
Use the <video> tag to embed video files hosted on your server:
HTML
<video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>Your browser doesn't support video.</p> </video> <!-- Common video attributes --> <video controls <!-- show play/pause controls --> autoplay <!-- play immediately (must also be muted) --> muted <!-- no sound (required for autoplay) --> loop <!-- repeat when finished --> poster="thumbnail.jpg" <!-- image shown before play --> preload="metadata"> <!-- load only metadata --> </video>
Embed YouTube Video
For YouTube videos, use <iframe>. Go to any YouTube video → Share → Embed, and copy the code:
HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="HTML Tutorial for Beginners" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media" allowfullscreen> </iframe> <!-- Responsive YouTube (maintain 16:9 ratio) --> <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe> </div>
HTML5 Audio
HTML
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <p>Your browser doesn't support audio.</p> </audio>
Best Format Choices
Reference
Video: MP4 (H.264) — supported everywhere. Also offer WebM for smaller size. Audio: MP3 — universal support. OGG as fallback. Always provide 2 formats with <source> for maximum browser compatibility.