Odo Background Video

Add a odo video component which plays in the background when the element comes into view and falls back to an image if the browser cannot autoplay video.

Support

IE9+

Dependencies

Odo Object Fit, Odo Responsive Images, Odo Video, Odo Viewport, Odo Window Events

Basic Odo Background Video

Markup

The image fallback for this component is a Odo Responsive Image which defers loading. It uses the same markup, except the .odo-responsive-img class is removed until this component knows whether the browser can autoplay video or not.

<div id="background-example-one" class="odo-background-video">
  <div class="odo-background-video__fallback-img hidden">
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="https://source.unsplash.com/category/buildings/800x400" media="(min-width: 992px)">
    <source srcset="https://source.unsplash.com/category/technology/600x300" media="(min-width: 768px)">
    <source srcset="https://source.unsplash.com/category/nature/400x200">
    <!--[if IE 9]></video><![endif]-->
    <img alt="picture 1 description">
    <noscript>
      <img src="https://source.unsplash.com/category/nature/400x200" alt="picture 1 description">
    </noscript>
  </div>
  <div class="odo-video hidden">
    <video preload="auto" loop muted playsinline>
      <source src="https://d1235ca2z646oc.cloudfront.net/videos/processed/33/ColdWinterDream-HD.mp4.webm" type="video/webm"/>
      <source src="https://d1235ca2z646oc.cloudfront.net/videos/processed/33/ColdWinterDream-HD.mp4.mp4" type="video/mp4"/>
    </video>
  </div>
</div>

Setup

var backgroundOne = new OdoBackgroundVideo(document.querySelector('#background-example-one'));

Public Methods

The following properties are available on the OdoBackgroundVideo instance

var video = instance.videoElement; // getter that returns the DOM video element
var image = instance.imageElement; // getter that returns the DOM image element