HTML Video header or background


Example

Adding a video that will autoplay on a loop and has no controls or sound. Perfect for a video header or background.

<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>

This CSS provides a fallback if the video cannot be loaded. Note that is it recomended to use the first frame of the video as the poster video.jpg.

#videobg {
  background: url(video.jpg) no-repeat;
  background-size: cover;
}