CODEWITHSUNDEEP
htmlcsshtml5-video
methuselah
methuselah

Reputation: 13206

Replace picture background with video background

What would be the quickest way to replace the picture background I currently have with a video background, while retaining all of its properties?

This is my code so far:

<div id="hero">
<div id="bg"></div>
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
<div class="post-header"><img src="http://www.makemeapro.org/wp-content/uploads/2015/07/logo.png" style="max-width:100%;height:auto;"></div>
<div class="post-header"><h1 style="color: #383838;">Helping young professionals navigate the world of work.</h1></div>
<div align="center"><button class="btn">JOIN THE REVOLUTION</button></div>
        </td>
    </tr>
</table>
</div>

JsFiddle here: http://jsfiddle.net/zxqz7oe0/

Upvotes: 0

Views: 2794

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29635

One quick way to replace the picture background with a video, would be to place the video on top of that picture, and make it cover the parent's area using object-fit. It requires minor HTML and CSS changes:

HTML:

<div id="bg">
     <video autoplay loop>
          <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
          <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
     </video>
</div>

CSS:

#hero video {
  width:100%;
  height:100%;
  object-fit:cover; /* Resize the video to cover parent, like a background-size:cover */
}

#hero #bg {
  /* The styles for #bg remain the same, you'd just need to add */
  /* one more, so the video that overflows the #hero is hidden: */
  overflow:hidden; 
}

You can see an example working on this JSFiddle: http://jsfiddle.net/zxqz7oe0/1/

One issue of this solution is that object-fit is not fully supported yet: Chrome, Firefox, and Android are OK, but you may face problem on Firefox and mobile. And IE doesn't support it at all. (You can see the browser support here.)

You could use this simple method, and then have a JavaScript fallback solution for the browsers that do not support object-fit. Knowing the video size, it would be easy to calculate the width/height needed at each moment when the window is loaded/resized.

Upvotes: 1

Related Questions