{"id":4722,"date":"2021-10-27T02:00:00","date_gmt":"2021-10-27T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/background-video-css\/"},"modified":"2026-01-26T17:36:20","modified_gmt":"2026-01-26T16:36:20","slug":"background-video-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/background-video-css\/","title":{"rendered":"How to Create a Video Background with CSS [Step-by-Step]"},"content":{"rendered":"\n

To use a video background, we have to use the HTML 5 <video><\/code> element with position absolute<\/code> inside a container wrapper.<\/strong><\/p>\n\n\n\n

Videos are increasingly common on websites nowadays and are a great way to create a modern website. With just a bit of CSS, you can add a video background to your site in a matter of minutes. However, note that this technique works only for <video><\/code> elements. This means the video will have to be hosted somewhere. You can also use CSS to create a YouTube video background<\/a>, but that’s not what this tutorial is about.<\/p>\n\n\n

Finding a background video<\/h2>\n\n\n

If you don’t have a video yet, the easiest way to find videos for your site is by using video stock galleries like Pixabay<\/a> or Pexel<\/a>.<\/p>\n\n\n\n

\"Pixabay<\/figure>\n\n\n\n

Once you find the one you want to use, you’ll have to download it and upload it to your server (or CDN services like Cloudinary<\/a>).<\/p>\n\n\n\n

Once uploaded, we have the URL of the video and we can use it in our <video><\/code> element.<\/p>\n\n\n

Adding the HTML for the video<\/h2>\n\n\n

For the video, we’ll be using the HTML5 video element. It expects at least a video source file and can be configured by passing multiple HTML attributes.<\/p>\n\n\n\n

For our example ,we’ll be using this:<\/p>\n\n\n

<video<\/span> playsinline<\/span> autoplay<\/span> muted<\/span> loop<\/span> poster<\/span>=\"cake.jpg\"<\/span>><\/span>\n    <source<\/span> src<\/span>=\"my-video-url.webm\"<\/span> type<\/span>=\"video\/webm\"<\/span>><\/span>\n    Your browser does not support the video tag.\n<\/video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Placing the video in the background with CSS<\/h2>\n\n\n
Usually, in CSS, we set the background image by using the background<\/code> property or the background-image<\/code> one.<\/p>\n\n\n
background<\/span>: url<\/span>(imgs<\/span>\/my-background-image<\/span>.png<\/span>);\nbackground-size<\/span>: cover<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we have a standard video element, so how do we convert it into a background? We’ll be using a little trick here. Using the CSS, position: absolute<\/code> we will simulate a background element.<\/p>\n\n\n
video<\/span> {\n  position<\/span>: absolute;\n  top<\/span>: 0<\/span>;\n  left<\/span>: 0<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This will place our video outside the normal flow of the document and relative to the element we choose within its parents.<\/p>\n\n\n\n
So, time to add our video container! We’ll be using a div<\/code> element as the container for our video. We called it video-wrapper<\/code>.<\/p>\n\n\n
<div<\/span> class<\/span>=\"video-wrapper\"<\/span>><\/span>\n  <video<\/span> playsinline<\/span> autoplay<\/span> muted<\/span> loop<\/span> poster<\/span>=\"cake.jpg\"<\/span>><\/span>\n    <source<\/span> src<\/span>=\"my-css-video-background.webm\"<\/span> type<\/span>=\"video\/webm\"<\/span>><\/span>\n    Your browser does not support the video tag.\n  <\/video<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And here’s where the magic happens:<\/p>\n\n\n
.video-wrapper<\/span> {\n  \/* Telling our absolute positioned video to \n  be relative to this element *\/<\/span>\n  position<\/span>: relative;\n\n  width<\/span>: 400px<\/span>;\n  height<\/span>: 200px<\/span>;\n\n  \/* Will not allow the video to overflow the \n  container *\/<\/span>\n  overflow<\/span>: hidden;\n\n  \/* Centering the container's content vertically \n  and horizontally *\/<\/span>\n  text-align<\/span>: center;\n  display<\/span>: flex;\n  align-items<\/span>: center;\n  justify-content<\/span>: center;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I added comments on the CSS code so you can see what each of the properties is for.<\/p>\n\n\n
Making the background video cover the whole container<\/h2>\n\n\n
It’s common for backgrounds to cover the whole container. We usually do this with CSS by using the style background-size: cover<\/code> directly on the background image. But because in this case, our video is not actually a CSS background, we’ll be using another little trick by using object-fit: cover<\/code> it together with height: 100%<\/code> and width: 100%<\/code> on our video<\/code> element.<\/p>\n\n\n
video<\/span> {\n  \/** Simulationg background-size: cover *\/<\/span>\n  object-fit<\/span>: cover;\n  height<\/span>: 100%<\/span>;\n  width<\/span>: 100%<\/span>;\n\n  position<\/span>: absolute;\n  top<\/span>: 0<\/span>;\n  left<\/span>: 0<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
To illustrate this better, here’s an example of a video background not covering the whole container:<\/p>\n\n\n\n
However, the background property<\/a> only works for images and colors. Not with videos.<\/p>\n\n\n\n
We’ll talk later more about the background video configuration<\/a> and the video formats<\/a>.<\/p>\n\n\n