Видео youtube на фон сайта | Для разработчиков | Сайты для бизнеса

Видео youtube на фон сайта


Как-то на сайт мне нужно было вывести видео на весь экран, к тому же что бы это видео проигрывалась с сайта ютьюб. Я долго искал решение, но наткнулся на замечательный плагин jquery.mb.YTPlayer, который помог мне справиться с данной задачей.
Особенности плагина:
  • Изменить прозрачность видео
  • Установить качество
  • Указать соотношение сторон
  • С какой секунды видео должно начинаться
  • Где видео должно заканчиваться
  • Показать панель управления
  • Поведение экрана
  • Уровень громкости звука
  • Как видео должно начаться, с отключение звука или нет
  • Использовать видео с циклом
  • Добавление растрового изображения
  • Отслеживание просмотров видео на Google Analytics
  • и много других

  Что бы вывести фон достаточно подключить скрипт фона и JQuery, а также стили плагина:
  1. <link href="../dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
  2.  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="../dist/jquery.mb.YTPlayer.js"></script>

И сам скрипт работы плеера:
  1. <script>
  2. var myPlayer;
  3. jQuery(function () {
  4.  
  5. var options = {
  6. mobileFallbackImage: "http://www.hdwallpapers.in/walls/pink_cosmos_flowers-wide.jpg",
  7. playOnlyIfVisible : true
  8. };
  9.  
  10. myPlayer = jQuery(".player").YTPlayer(options);
  11. });
  12. </script>

 Затем нужно создать контейнер в теле HTML, в котором будет выводиться видео:
  1. <div id="myPlayer" style="background: #000; height: 100%; width: 100%; position: relative; " ></div>

Также нужно вывести сам плеер, в котором мы указываем какое видео с ютуба нам нужно вывести и его настройки:
  1. <div class="player" data-property="{videoURL:'JopLLqHYDIU',containment:'#myPlayer', showControls:false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1, addRaster:true, quality:'default', optimizeDisplay: true, realfullscreen: true }"></div>

 Пояснения по настройкам:

videoURL - здесь мы указываем ссылку на видео с ютьюб, можно указать просто код видео, а можно и полную ссылку, как в строке браузера, поддерживаются также короткие ссылки youtu.be

containment - здесь указывается ID контейнера, где должно выводиться видео. Также можно указать тег body, тогда видео будет проигрываться на весь экран и не прокручиваться при прокрутке окна. 

addRaster - Показать или скрыть растровые изображения поверх видео. На видео накладываются эффекты шума.

Также много других интересных свойств.

Данный плагин позволяет использовать на сайте абсолютно любое видео в качестве фона с ютуба, на котором имеются много фоновых видео природы, океана, огня, облаков и других. И скрипт очень легко использовать. 

Создал плагин Видеофон youtube, можно посмотреть и скачать в виде компонента для битрикса

Загрузка

14 просмотров
07.11.2019
Теги: jquery



Комментариев пока нет
Оставить комментарий
 
Текст сообщения*
Защита от автоматических сообщений
 


Сервисы




Последние публикации

14.Ноя.2019 Не выгружаются заказы в 1С
Не выгружаться заказы в 1С из сайта на битрисе могут по разн...

07.Ноя.2019 Видео youtube на фон сайта
Как-то на сайт мне нужно было вывести видео на весь экран, к...

05.Ноя.2019 Свойство с большим списком (датой)
Если в инфоблоке необходимо использовать свойство типа списо...

05.Ноя.2019 Основные настройки BitrixVM
Приведу основные пути и файлы конфигурации в виртуальной маш...

24.Окт.2019 Безлимитный интернет от Билайн не безлимитный
Как-то мне пришла смс от Билайна, что мне доступна услуга бе...

24.Окт.2019 Как мне помог сервис kwork.ru
Хочу поделиться своей истории о том, как я начал зарабатыват...

04.Май.2019 Вывод ошибок в .settings.php
Если у вас на сайте произошла ошибка, но она не отображается...

05.Дек.2018 403 Forbidden в админке Bitrix

15.Июн.2018 Пагинация REL PREV NEXT 1С-Битрикс
Что бы облегчить поисковикам работу можно указать в теге hea...

07.Июн.2018 Как выровнять блок по центру экрана
Что бы выровнять блок по горизонтали, достаточно прописать с...