Cloudinary Video Player

Autoplay on scroll

Example Code:


      <video
        id="player"
        controls
        class="cld-video-player"
        width="500"
        data-cld-public-id="sea_turtle"
        data-cld-autoplay-mode="on-scroll">
      </video>



      var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });

Scroll down to see the player and then up to see the above in action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim. In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in finibus nisi. Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros neque. Etiam cursus imperdiet aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim. In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in finibus nisi. Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros neque. Etiam cursus imperdiet aliquet.