0

Have an auto-play background image and I'm trying to figure out how to replace it with an image on devices that don't allow auto-play. the <video> tag POSTER element seems to work alright, but it also seems on my iPhone, which does not allow auto-play of video, still downloads the video even though it's not used at all. Is there a better solution to this?

(The autoplay detection post is part of the answer but my question is a tad different and I have marked an answer below.)

#video-bg {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
 display: block;
}
video {
  display: block;
}

.video-container {
  width: 100%;
  max-height: 550px;
  overflow: hidden;
  position: static;
  top: 0;
  right: 0;
  z-index: -100;
}
.overlay-desc {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div id="top-banner-vid" class="container-fluid px-0">
  <div class="row no-gutters video-container">
    <div class="col">
      <video class="embed-responsive video-bg" poster="12-sunrise-picture.jpg" autoplay loop muted>
        <source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
        Your browser does not support the video tag. Please update your browser to enjoy the full features of this website. </video>
      <div class="container overlay-desc">
        <h1>Wayne's World</h1>
      </div>
    </div>
  </div>
</div>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Brett Williams
  • 141
  • 1
  • 13
  • I suppose you are referring to Safari in iOS, should allow autoplay if muted. Check if is in viewport, otherwise it will pause automatically if is not in viewport. – August Mar 30 '18 at 17:24

1 Answers1

1

First, detect if autoplay is supported, then:

$(function() {
    let $container = $('#top-banner-vid .video-container > .col');
    let $video = $.parseHTML('<video class="embed-responsive video-bg" poster="12-sunrise-picture.jpg" autoplay loop muted><source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">Your browser does not support the video tag. Please update your browser to enjoy the full features of this website.</video>');
    let $image = $.parseHTML('<img src="12-sunrise-picture.jpg"/>');

    function addVideo() {
        $container.append($video);
    }

    function addImage() {
        $container.append($image);
        $image.on('click', () => {
            $container.empty().append($video);
        });
    }

    if (autoplaySupported()) {
        addVideo();
    } else {
        addImage();
    }
}();

Of course, then they'll have to click it again once it loads, so you would probably then want to try and use the click event to also start the video, which might be tricky.

dave
  • 62,300
  • 5
  • 72
  • 93