DEV Community

Sh Raj
Sh Raj

Posted on

Use CSS to Set a Video as the Full Background of Your Website

If you want the video to play as the full background of your website, you can use CSS to position the video element behind the other content on your page. Here's an example CSS code that you can use:

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#my-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*object-fit: cover;
  z-index: -1;*/
}
</style>
Enter fullscreen mode Exit fullscreen mode

In this code, the HTML and body elements are set to have a height of 100% so that they fill the entire viewport. The video element is then positioned absolutely behind the other content on the page, with a width and height of 100% to make it fill the entire viewport. The "object-fit" property is set to "cover" so that the video maintains its aspect ratio while filling the entire viewport. Finally, the "z-index" property is set to -1 to ensure that the video is positioned behind the other content on the page.

You can add this CSS code to your existing stylesheet or add it in a separate tag in the head section of your HTML document.</p> <p>Example :- YouTube Embed URLs.</p> <p>You can also use this trick with div elements while using any HTML5 Video Player Library.<br> Examples :-</p> <ul> <li><p><a href="https://videoplyr.sh20raj.repl.co/">https://videoplyr.sh20raj.repl.co/</a></p></li> <li><p><a href="https://driveplyr.sh20raj.repl.co/">https://driveplyr.sh20raj.repl.co/</a></p></li> </ul>

Top comments (0)