LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
.container.my-5
  h1.text-center Scroll down!
  
  div.stretch.my-5.p-5.d-flex

  #waypoint-video.embed-responsive.embed-responsive-4by3
    video.embed-responsive-item(lazyload autoplay loop muted playsinline width="100%")
      source(data-src="https://ia600906.us.archive.org/6/items/0530_Sound_and_the_Story_The_M03876_11_35_52_00/0530_Sound_and_the_Story_The_M03876_11_35_52_00.mp4" type="video/mp4")
CSS
.stretch {
  height: 800px;
  background: #eaeaea;
}

#waypoint-video {
  background: #fff url(https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif) no-repeat;
  background-size: contain;
}
JS
// http://imakewebthings.com/waypoints/shortcuts/inview/

var inview = new Waypoint.Inview({
  element: $('#waypoint-video')[0],
  //offset: '65%',
  enter: function(direction) {
    var vid = $('#waypoint-video video source');
    var videoUrl = vid.data('src');
    vid.removeAttr('data-src');
    vid.attr('src',videoUrl);
    var video = vid.parent('video');
    // start playing using **native** JS API! 
    // jQuery style $(video).play() won't work!
    video[0].load();
    video[0].play();
  },
  entered: function(direction) {
  },
  exit: function(direction) {
  },
  exited: function(direction) {
  }
})

Description

This is just a simple example how to lazy load a video once it appears in the viewport.
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv