use video as background for div

Question

I would like to use a video as background in CSS3. I know that there is no background-video property, but is it possible to do this behavior. Using a fullsize video-tag doesn't give the wanted result, cause there is content that need to be displayed over the video.

It need to be non JS. If it is not possible then I need to do changes on my serverside an give as result also a screenshot of the video.

I need the video to replace the colored boxes:

The colored boxes are atm just, CSS boxes.

Answer 1

Pure CSS method

It is possible to center a video inside an element just like a cover sized background-image without JS using the object-fit attribute or CSS Transforms.

2021 answer: object-fit

As pointed in the comments, it is possible to achieve the same result without CSS transform, but using object-fit, which I think it's an even better option for the same result:

.video-container {     height: 300px;     width: 300px;     position: relative; }  .video-container video {   width: 100%;   height: 100%;   position: absolute;   object-fit: cover;   z-index: 0; }  /* Just styling the content of the div, the *magic* in the previous rules */ .video-container .caption {   z-index: 1;   position: relative;   text-align: center;   color: #dc0000;   padding: 10px; }

<div class="video-container">     <video autoplay muted loop>         <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />     </video>     <div class="caption">       <h2>Your caption here</h2>     </div> </div>

---

Previous answer: CSS Transform

You can set a video as a background to any HTML element easily thanks to transform CSS property.

Note that you can use the transform technique to center vertically and horizontally any HTML element.

.video-container {   height: 300px;   width: 300px;   overflow: hidden;   position: relative; }  .video-container video {   min-width: 100%;   min-height: 100%;   position: absolute;   top: 50%;   left: 50%;   transform: translateX(-50%) translateY(-50%); }  /* Just styling the content of the div, the *magic* in the previous rules */ .video-container .caption {   z-index: 1;   position: relative;   text-align: center;   color: #dc0000;   padding: 10px; }

<div class="video-container">   <video autoplay muted loop>     <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />   </video>   <div class="caption">     <h2>Your caption here</h2>   </div> </div>