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

Как-то на сайт мне нужно было вывести видео на весь экран, к тому же что бы это видео проигрывалась с сайта ютьюб. Я долго искал решение, но наткнулся на замечательный плагин jquery.mb.YTPlayer, который помог мне справиться с данной задачей.
Особенности плагина:

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

Что бы вывести фон достаточно подключить скрипт фона и JQuery, а также стили плагина:

<link href="../dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../dist/jquery.mb.YTPlayer.js"></script>

И сам скрипт работы плеера:

<script>
    var myPlayer;
    jQuery(function () {
 
      var options = {
        mobileFallbackImage: "http://www.hdwallpapers.in/walls/pink_cosmos_flowers-wide.jpg",
        playOnlyIfVisible  : true
      };
 
      myPlayer = jQuery(".player").YTPlayer(options);
    });
</script>

Затем нужно создать контейнер в теле HTML, в котором будет выводиться видео:

<div id="myPlayer" style="background: #000; height: 100%; width: 100%; position: relative; " ></div>

Также нужно вывести сам плеер, в котором мы указываем какое видео с ютуба нам нужно вывести и его настройки:

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

Загрузка

9921 просмотр

07.11.2019

Теги: jquery

комментариев:

Оставить комментарий

0 khanza 13.11.2024
https://github.com/toky-toky/charttop/discussions/1 https://github.com/toky-toky/charttop/discussions/2 https://github.com/toky-toky/charttop/discussions/3 https://github.com/toky-toky/charttop/discussions/4 https://github.com/toky-toky/charttop/discussions/5 https://github.com/toky-toky/charttop/discussions/6 https://github.com/toky-toky/charttop/discussions/7 https://github.com/toky-toky/charttop/discussions/8 https://github.com/toky-toky/charttop/discussions/9 https://github.com/toky-toky/charttop/discussions/10 https://github.com/toky-toky/charttop/discussions/11 https://github.com/toky-toky/charttop/discussions/12 https://github.com/toky-toky/charttop/discussions/13 https://github.com/toky-toky/charttop/discussions/14 https://github.com/toky-toky/charttop/discussions/15 https://github.com/toky-toky/charttop/discussions/16 https://github.com/toky-toky/charttop/discussions/17 https://github.com/toky-toky/charttop/discussions/18 https://github.com/toky-toky/charttop/discussions/19 https://github.com/toky-toky/charttop/discussions/20 https://github.com/toky-toky/charttop/discussions/21 https://github.com/toky-toky/charttop/discussions/22 https://github.com/toky-toky/charttop/discussions/23 https://github.com/toky-toky/charttop/discussions/24 https://github.com/toky-toky/charttop/discussions/25 https://zealy.io/cw/overlordelreinosagrado https://zealy.io/cw/overlordelreinosagrado/questboard/6295b8f3-ef82-44e4-86e6-badbf19babdf/30d41d73-a7a3-4c55-b0f6-652e16c39678 https://zealy.io/cw/overlordelreinosagrado/questboard/6295b8f3-ef82-44e4-86e6-badbf19babdf/3b035003-c054-4fe6-b81a-5961697a4288 https://zealy.io/cw/overlordelreinosagrado/questboard/6295b8f3-ef82-44e4-86e6-badbf19babdf/74bad953-c43a-46aa-9947-ff8994bc1e02 https://zealy.io/cw/overlordelreinosagrado/questboard/6295b8f3-ef82-44e4-86e6-badbf19babdf/496bdd89-4408-458d-bdaf-f2e7521738e5 https://zealy.io/cw/overlordelreinosagrado/questboard/6295b8f3-ef82-44e4-86e6-badbf19babdf/80a64a63-28ad-46fd-a4f5-4481149f9cf2 https://zealy.io/cw/overlordelreinosagrado/questboard/6295b8f3-ef82-44e4-86e6-badbf19babdf/7ff21d99-12ff-4b19-a7c6-e0ac41c368bd https://zealy.io/c/robotsalvaje https://zealy.io/cw/robotsalvaje/questboard/43f12992-3364-4e51-9b0c-960dd3989e82/0cfc39a0-1090-40f1-ae0d-ba32f57ed1e8 https://zealy.io/cw/robotsalvaje/questboard/43f12992-3364-4e51-9b0c-960dd3989e82/bf86fcea-16b3-4e42-bc6f-127e6c492c8d https://zealy.io/cw/robotsalvaje/questboard/43f12992-3364-4e51-9b0c-960dd3989e82/2cf88989-f519-477a-b3d1-2f792d64ddbe https://zealy.io/cw/robotsalvaje/questboard/43f12992-3364-4e51-9b0c-960dd3989e82/e7adea0d-c300-4eb5-8e12-154e12c4948a https://zealy.io/cw/robotsalvaje/questboard/43f12992-3364-4e51-9b0c-960dd3989e82/c4f788f3-88f6-4d50-9266-252fb059ccaf https://zealy.io/cw/robotsalvaje/questboard/43f12992-3364-4e51-9b0c-960dd3989e82/0965e6a1-b6c9-4b1f-8c17-c24bd1bf137f https://zealy.io/c/terrifier3-3330 https://zealy.io/cw/terrifier3-3330/questboard/818990b1-b376-4cf3-805e-d6f20910d79b/8252ff97-3187-4f80-9cfd-a6409b98e229 https://zealy.io/cw/terrifier3-3330/questboard/818990b1-b376-4cf3-805e-d6f20910d79b/9a7b9ba1-59ff-469e-9d6d-7cf6f10a58d0 https://zealy.io/cw/terrifier3-3330/questboard/818990b1-b376-4cf3-805e-d6f20910d79b/21656729-ec54-45cd-a6a9-a8ff912eab83 https://zealy.io/cw/terrifier3-3330/questboard/818990b1-b376-4cf3-805e-d6f20910d79b/7a90ac63-b0d0-41c3-ad6f-5c4f0c3b49fb https://zealy.io/cw/terrifier3-3330/questboard/818990b1-b376-4cf3-805e-d6f20910d79b/787fdd77-c7d5-4fdb-8635-c3db605a5c55 https://zealy.io/cw/terrifier3-3330/questboard/818990b1-b376-4cf3-805e-d6f20910d79b/87ad82e4-f36f-4028-817b-353e4fd64fdb https://github.com/Blitok-tv/Film-Completo/discussions/1 https://github.com/Blitok-tv/Film-Completo/discussions/2 https://github.com/Blitok-tv/Film-Completo/discussions/3 https://github.com/Blitok-tv/Film-Completo/discussions/4 https://github.com/Blitok-tv/Film-Completo/discussions/5 https://github.com/Blitok-tv/Film-Completo/discussions/6 https://github.com/Blitok-tv/Film-Completo/discussions/7 https://github.com/Blitok-tv/Film-Completo/discussions/8 https://github.com/Blitok-tv/Film-Completo/discussions/9 https://github.com/Blitok-tv/Film-Completo/discussions/10 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/1 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/2 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/3 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/4 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/5 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/6 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/7 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/8 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/9 https://github.com/te-risa-tv/Altadefinizione-1080p/discussions/10
Имя Цитировать 0

Свойство с большим списком (датой)

Не выгружаются заказы в 1С

Статьи

Сервисы

Найти среднюю оценку

Прибавить или вычесть процент

Калькулятор процентов

Калькулятор соотношения сторон пропорции ширины и высоты

Калькулятор стоимости кафеля (плитки)

Калькулятор стоимости длины

Калькулятор цен по весу

Калькулятор сравнения (разницы) цен

Калькулятор стоимости товара

Тетрис на Двоих

Проверка домена (whois)

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

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
Приведу основные пути и файлы конфигурации в виртуальной маш...