htmlcsshtml5-video

use video as background for div

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:

Boxes

The colored boxes are atm just, CSS boxes.

Solution

  • Why not fix a <video> and use z-index:-1 to put it behind all other elements?

    .video-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


/* Demo-only styles */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content {
  margin-top: 300px;
  background: black;
  color: white;
}
    <div class="video-container">
  <video muted autoplay poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>
<div class='content'>
  I'm content!! :D
</div>

    If you want it within a container you have to add a container element and a little more 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;
}


/* Demo-only styles */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  color: white;
}
    <div class='vidContain'>
  <div class='vid'>
    <video muted autoplay preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
            <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
            <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"/>
            <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"/>
            <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
    <div class='content'>
      I'm content!! :D
    </div>
  </div>
</div>

<div class='vidContain'>
  <div class='vid'>
    <video muted autoplay preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
            <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
            <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"/>
            <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"/>
            <p>Your user agent does not support the HTML5 Video element.</p>
        </video>
    <div class='content'>
      I'm more content!! :D
    </div>
  </div>
</div>