CODEWITHSUNDEEP
csshtmlhtml5-videobackground-image
Thorkil Holm-Jacobsen
Thorkil Holm-Jacobsen

Reputation: 7676

Video with background image flickers on page load

I am trying to make a banner which is supposed to show a video with a heading. For browsers that do not support the video tag or the provided video source, the banner should instead fall back to using a background image. My current solution is this:

HTML

<div class="container">
  <video autoplay  muted loop preload="none" class="video" style="background-image: url(http://source.to/background-image.jpg);">
    <source src="http://source.to/video.mp4">
  </video>

  <h1 class="title">
    This is the banner title
  </h1>
</div>

CSS

.container {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.video {
  height: auto; 
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.title{
  position: absolute;
  top: 200px;
  width: 100%;
  text-align: center;
  color: white;
}

jsfiddle (tested in Chrome).

The problem, as can be seen in the jsfiddle, is that the background image will be displayed shortly while the video is loading. A possible work-around would be to use the first frame of the video as the background image, but that would make the banner less flexible and put higher demands on the video production. I also considered using Modernizr's feature detection, but it seems to be very unreliable in this regard.

Are there any good ways to solve this problem?

Upvotes: 1

Views: 1194

Answers (1)

Lucky&#39;s
Lucky&#39;s

Reputation: 116

Instead of using a background-style as your fallback, you could just put the the fallback as an img under the video source (tested in chrome).

I updated your fiddle to showcase the new behaviour.

Fiddle: https://jsfiddle.net/v9u657wb/4/

New HTML-Code (css unchanged):

<div class="container">
<video autoplay  muted loop preload="none" class="video">
  <source src="http://techslides.com/demos/sample-videos/small.mp4">
  <img src="http://www.votingmonkey.com/res/fb_users/136test-banner-2.jpg">
</video>

<h1 class="title">
  This is the banner title
</h1>

Upvotes: 1

Related Questions