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.




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

Video by Denis Despair on wedistill.io

Basic Odo Background Video


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">
      <img src="https://source.unsplash.com/category/nature/400x200" alt="picture 1 description">
  <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"/>


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