Видео 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, можно посмотреть и скачать в виде компонента для битрикса

Загрузка

9392 просмотра
07.11.2019
Теги: jquery



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


Сервисы




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

24.окт.2021 Битрикс Работа с сокетами Ошибка! Не работает
В проверке сайте можно наблюдать такую ошибку
Работа ...

17.июл.2021 Как передать Roistat в заказ 1С-Битрикс
Передать ID Roistat можно в сам заказ в Битриксе после его о...

21.июн.2021 Сбой на файле, ошибка распаковки пакета
При очередном обновлении 1С-Битрикс выскочила ошибка [UUGZA0...

03.июн.2020 Не выводиться заглушка в композитном кеше
Столкнулся с тем, что при указании заглушки в динамической о...

01.апр.2020 Установка SSL сертификата LetsEncrypt на BitrixVM
Установка SSL сертификата LetsEncrypt на виртуальную машину ...

07.мар.2020 Битрикс настройка SSL, ошибка работы с сокетами
Заходим в меню битрикса выбираем 8. Manage pool web servers ...

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

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

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

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