Автопроигрывание видео YouTube при прокрутке страницы

Автозапуск видео ютубе при пролистывании
Рассмотрим пример автопроигрывания видео с ютубе при пролистывании страницы (как в социальных сетях). Мы будем использовать функционал API Youtube для управления видеоплеером! По сути, нам необходимо включение/выключение проигрывания видео в момент видимости/невидимости определенного элемента на экране.

Источник

Комментарии (8):

Александр03.01.2018 16:59

Вячеслав, спасибо за представленную информацию!!!
Давно искал это решение.
Если не сложно, поделитесь процессом установки и настройки скрипта.

Заранее признателен, с уважением Александр.

Вячеслав Скоблей03.01.2018 16:59

Александр, Вы не видите кода в статье? Там же все попунктно!

Александр03.01.2018 16:59

Вячеслав, спасибо, что отозвались на вопрос, дело в том, что я не очень силен в кодах.
Стандартное видео с авто воспроизведением помещаю на страницу блога Worpress без проблем таким образом:

А вот, с кодом для авто запуском при прокрутке, так же просто не получилось. 🙁
Поэтому прошу помощи или совета.

Вячеслав Скоблей03.01.2018 16:59

Вставьте весь код, что вы видите на странице, в том месте, где должен проигрываться ролик.

videoId: 'fqesxT90x8g', //здесь id ролика

Здесь (в конце кода) поставьте id своего видео (он есть в ссылке видеоролика). Вот и все!
Если вы используете WordPress, вставляйте этот код в режиме ТЕКСТ (не ВИЗУАЛЬНО).

Если видео все равно не проигрывается автоматом, попробуйте вверху кода еще добавить:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
EAR03.01.2018 16:59

Доброго времени суток. Я хочу растянуть плеер на весь экран, поэтому в строке width: 600, height: 400 меняю значение на width: 100 + "%", height: 100 + "%", при таких параметрах плеер не реагирует на прокрутку. Какие параметры следует указать в коде, чтобы проигрыватель работал при введенных мною величинах.

Вячеслав Скоблей03.01.2018 16:59

Достаточно добавить в стили CSS:

#video-placeholder {
    width: 100%;
}
EAR03.01.2018 16:59

Размер настроить не проблема, меня интересует реакция плеера с большим размером на прокрутку, точнее отсутствие реакции... Я просто расширил плеер на всю страницу, поставил сверху отступ, чтобы посмотреть на реакцию скролла и, как я говори ранее, реакция отсуствует и плеер не запускается.

Вячеслав Скоблей03.01.2018 16:59

Вы должны поиграться со значением в скрипте (увеличить его для больших размеров видео):

var screen_height = $(window).height()+600;

Войдите или зарегистрируйтесь чтобы оставить комментарий