Скрипт для включения видео при прокрутке

Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда само видео появляется на экране. При этом видео становится на паузу, если хоть немного выходит за экраны, и пользователь не сможет насладиться полным отображением видеозаписи.

Реализовать можно разными методами и со сторонними библиотеками, но самый простой вариант рассмотрим в примере ниже:

See the Pen Playing video when scrolling and video visible fully on screen by Denis (@deniscreative) on CodePen.0

Как вариант, можно использовать различные плагины для определения положения объектов на экране например, плагин isInViewport, только с использованием данного плагина видео будет включаться даже при появлении на экране небольшой части видео, а не при появлении всего видео целиком.

Такой получился скрипт:

$(function() {
  var $video = $('.video');
  var $window = $(window);

  $window.scroll(function() {
    if ($video.is(":in-viewport")) {
      $video[0].play();
    } else {
      $video[0].pause();
    }
  });
});

Вот рабочий пример, только в JS я подключил и сам скрипт isInViewport.min.js (потому что не получилось подключить его в CodePen по быстрому по другому), а скрипт, который описан выше добавлен под код скрипта isInViewport.min.js в строках [9-21], ну вы поняли, в общем.

See the Pen Playing video when scrolling and video visible fully on screen with plugin isInViewport by Denis (@deniscreative) on CodePen.0

<video class="video123"

var $video = $('.video');