Readplace

The <video> and <source> tags

web.dev 6 min read
View original
Summary (TL;DR)
To add video to a web page, use the <video> element with the type attribute, or pair it with <source> elements to specify multiple file formats (e.g., WebM, MP4). Using type helps the browser pick a playable format without downloading unnecessary files. Media fragments (#t=start, end) allow specifying start and end times. A poster image provides a fallback when the video can't load. Use CSS (max-width:100%) to prevent overflow on different screen sizes. Autoplay and preload attributes affect playback behavior but have platform-specific restrictions and performance trade-offs.