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

User · Answer

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:

_x000D_

.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;
}

_x000D_

<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>

_x000D_

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.

_x000D_

.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;
}

_x000D_

<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>

_x000D_

User · Answer

I believe this is what you re looking for  It automatically scaled the video to fit the container   DEMO  http   jsfiddle net t8qhgxuy   Video need to have height and width always set to 100  of the parent   HTML    lt div class  one  gt  CONTENT OVER VIDEO      lt video class  video-background  no-controls autoplay src  https   dl dropboxusercontent com u 8974822 cloud-troopers-video mp4  poster  http   thumb multicastmedia com thumbs aid w h t1351705158 1571585 jpg  gt  lt  video gt   lt  div gt    lt div class  two  gt       lt video class  video-background  no-controls autoplay src  https   dl dropboxusercontent com u 8974822 cloud-troopers-video mp4  poster  http   thumb multicastmedia com thumbs aid w h t1351705158 1571585 jpg  gt  lt  video gt  CONTENT OVER VIDEO  lt  div gt    CSS   body       overflow  scroll      padding   60px 20px      one       width  90       height  30vw      overflow  hidden      border  15px solid red      margin-bottom  40px      position  relative      two      width  30       height  300px      overflow  hidden      border  15px solid blue      position  relative      video-background      class name used in javascript too        width  100      width needs to be set to 100         height  100      height needs to be set to 100         position  absolute      left  0      top  0      z-index  -1      JS   function scaleToFill            video video-background   each function index  videoTag           var  video     videoTag              videoRatio   videoTag videoWidth   videoTag videoHeight             tagRatio    video width      video height               val          if  videoRatio  lt  tagRatio               val   tagRatio   videoRatio   1 02   lt  -- size increased by 2  because value is not fine enough and sometimes leaves a couple of white pixels at the edges -- gt           else if  tagRatio  lt  videoRatio               val   videoRatio   tagRatio   1 02                    video css  transform   scale     val          val                           function          scaleToFill             video-background   on  loadeddata   scaleToFill          window  resize function             scaleToFill

User · Answer

Why not fix a  lt video gt  and use z-index -1 to put it behind all other elements   html  body   width 100   height 100   margin 0  padding 0      lt div style  position  fixed  top  0  width  100   height  100   z-index  -1   gt       lt video id  video  style  width 100   height 100   gt                    lt  video gt   lt  div gt   lt div class  content  gt             Demo  If you want it within a container you have to add a container element and a little more CSS     HTML     lt div class  vidContain  gt       lt div class  vid  gt           lt video gt       lt  video gt       lt  div gt       lt div class  content  gt      The rest of your content      lt  div gt   lt  div gt      CSS     vidContain       width 300px  height 200px      position relative      display inline-block      margin 10px     vid       position  absolute       top  0  left 0      width  100   height  100        z-index  -1         content       position absolute      top 0  left 0      background  black      color white      Demo

[html] use video as background for div

Pure CSS method

2021 answer: object-fit

Previous answer: CSS Transform

Examples related to html

Examples related to css

Examples related to html5-video