Как сделать видео с Ютуба фоном на сайте

Содержание

Веб-дизайн постоянно развивается, и каждый день появляются новые инновации, улучшающие пользовательский опыт и делающие веб-сайты более динамичными и увлекательными. Одной из таких инноваций является использование видео с YouTube в качестве фона на веб-страницах. Этот тренд не только добавляет визуальные эффекты и привлекательность к вашему сайту, но и позволяет вам рассказывать историю или продемонстрировать продукт в более интересной и динамичной форме. В этой статье мы рассмотрим, как добавить видео с YouTube в качестве фона на вашем веб-сайте.

1. Начните с поиска подходящего видео на YouTube, которое вы бы хотели использовать в качестве фона на вашем веб-сайте. Убедитесь, что видео не нарушает авторские права или лицензию с использованием в качестве фона.

2. При использовании YouTube-видео фон вам понадобится код вставки видео с YouTube. Чтобы получить этот код, откройте видео на YouTube, нажмите кнопку «Поделиться» под видео, а затем выберите вкладку «Внедрить». Скопируйте код вставки.

Как сделать видео с YouTube фоном на сайте

3. Создайте новый HTML-файл или откройте существующий. Вставьте скопированный код в месте, где вы хотите локализовать видео на вашем веб-сайте. Обычно это будет в секции , но вы можете выбрать любое место на вашем сайте, которое вам нравится.

Пример использования видео с YouTube в качестве фона

4. После вставки кода в ваш HTML-файл, сохраните его и откройте в браузере, чтобы увидеть видео фон на вашем сайте. Вы должны убедиться, что видео отображается и воспроизводится должным образом.

5. Если ваше видео воспроизводится автоматически, вы также можете добавить дополнительные параметры в код вставки, чтобы добавить управление видео фоном. Например, вы можете добавить параметр «autoplay=0», чтобы отключить автоматическое воспроизведение, или «controls=1», чтобы отобразить элементы управления видео. Вот пример кода с параметрами:

Пример использования видео с YouTube в качестве фона var player; function onYouTubeIframeAPIReady() < player = new YT.Player(‘video-placeholder’, < videoId: ‘ВАШ_ID_ВИДЕО_Na_Youtube’, playerVars: < autoplay: 0, // Вирусозапрет controls: 1, // Вирусозапрет rel: 0, // Вирусозапрет showinfo: 0 // Вирусозапрет >, events: < onReady: initialize >>); > function initialize()

6. Добавьте два новых элемента в ваш HTML-файл; один для создания обертки для видео фона, а другой для создания плейсхолдера видео. Вот пример кода:

Пример использования видео с YouTube в качестве фона #video-wrapper < position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; >#video-placeholder var player; function onYouTubeIframeAPIReady() < player = new YT.Player(‘video-placeholder’, < videoId: ‘ВАШ_ID_ВИДЕО_Na_Youtube’, playerVars: < autoplay: 0, // Вирусозапрет controls: 1, // Вирусозапрет rel: 0, // Вирусозапрет showinfo: 0 // Вирусозапрет >, events: < onReady: initialize >>); > function initialize()

7. Также вы можете настроить размер видео в обертке поля ввода CSS. Например:

#video-wrapper

8. После настройки размера и позииционирования видео в обертке Вы можете добавить фоновый контент над видео, создав дополнительные слои или элементы HTML. Это также поможет избежать любых проблем с доступностью и производительностью вашего сайта.

Еще по теме: Почему упали просмотры на Youtube

9. Убедитесь, что ваш видео фон отзывчив и будет правильно отображаться на устройствах различных размеров экрана. Для этого вы можете использовать медиа-запросы CSS или JavaScript для определения разрешения экрана и регулировки размера видео.

10. Не забудьте проверить ваш сайт на разных браузерах и устройствах, чтобы убедиться в его корректной работоспособности и отзывчивости. Разные браузеры и устройства могут по-разному обрабатывать видео фоны, поэтому быть внимательными и уверенными, что видео отображается должным образом на всех платформах.

В заключение, использование видео с YouTube в качестве фона вашего веб-сайта может добавить вау-эффект и сделать ваш сайт более интересным и запоминающимся. Однако вы должны быть осторожны, чтобы не перегружать ваш сайт и не ухудшать его производительность. Всегда следуйте лучшим практикам веб-дизайна и убедитесь, что ваш видео фон работает должным образом на всех устройствах и браузерах.

Источник: qaa-engineer.ru

Создание Video Background HTML 5

В данной статье идет речь о создании Video Background — фоновой видео заставки HTML 5 веб страницы.

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

Video background HTML 5, вероятно, лучший способ привлечь внимание!

Поддержка HTML 5 видео

Совместимость с видео HTML5 действительно высока. Видео в HTML5 поддерживают все современные браузеры (> IE8), при этом, для просмотра не требуется установка дополнительных расширений.

Хорошее видео в фоновом режиме (video background) может легко заставить людей остановиться и изучить его, увеличивая время, которое они проводят на сайте. Это длительное время на сайте потенциально может привести к большему взаимодействию с другим содержимым на странице.

Для личного, либо корпоративного сайта можно снять небольшой (10-15 секундный видеоролик) и применять в качестве заставки video background. Тогда ресурс становится действительно индивидуальным и уникальным!

Итак, давайте приступим к созданию фонового видео.

Создание Video Background HTML 5 Тег VIDEO

Во первых нужно подготовить видео в трех форматах MP4, Ogg, WebM.

MP4 — Распостраненный формат, предназначенный для работы с видео и фото файлами.
Ogg — Также контейнер для передачи, хранения и работы с аудео и видео.
WebM — Собственно основной формат, сжатый. Применяется при создании и отправке HTML 5 видео и веб презентаций.

Конвертация в нужные форматы

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

Поддержка форматов видео современными браузерами

Android devices — MP4
Google Chrome — WebM, Ogg
Mozilla Firefox — WebM, Ogg
Opera — WebM, Ogg
Safari — MP4 (including iPhone)
Internet Explorer 9 — MP4
Internet Explorer 6-8 — No HTML5, flash only

Конструкция HTML 5 Video Background

Теперь разберемся подробнее что из себя представляет HTML конструкция тега video

Задаем минимальные CSS свойства:

.fullscreen-bg < position: absolute; top: 0px; left: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; overflow: hidden; >.fullscreen-bg video

Все! А вы думали будет сложнее?

Создание Video Background HTML 5 из примера 3

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

Еще по теме: Почему не выкладывается видео в Ютуб

Ну и CSS разметка, используемая в данном примере.

На самом деле при создании Video Background можно импровизировать с HTML 5 разметкой и CSS свойствами, в зависимость от задач, поставленных веб разработчику. Поэтому к статье и приложены 3 примера для создания классных заставок и фонового видео.

Скачать исходники 3-х примеров Video Background

— Для меня лично самое сложное и время затратное при создании видео в качестве фона является подборка нужных видеороликов.

Лучший способ отблагодарить автора

Оптимизируем видео из YouTube и Vimeo на страницах сайта

Использование видео становится все более распространенным, а такие сервисы как YouTube, Vimeo и другие предоставляют пользователям возможности для встраивания видео на свои сайты. Хотя это очень удобно, такое встраивание может привести к значительным задержкам в загрузке страницы. В заметке я разберу, каким образом встраиваемое видео замедляет загрузку сайта и как с этим можно бороться. А также будут разобраны плагины к CMS, которые могут помочь в решение этой задачи.

Встраивание YouTube-видео на сайте

Для того чтобы встроить видео из YouTube на страницу своего сайта достаточно всего лишь загрузить видео на YouTube и выбрать «Поделиться».

Рис. 1. Как вставить видео на сайт. Далее выбираете «HTML-код», и у вас появляется возможность изменить размер встраиваемого видео и задать другие настройки.

Рис.

2. Встраивание видео с YouTube. В итоге вы получаете небольшой кусочек кода, который вам нужно вставить на вашу страницу:

Но внедрение видео через использование этого кода сопряжено проблемой: браузер скачивает при обращении к странице более, чем 500 КБ файлов Javascript. Это происходит в любом случае, даже если пользователь и не взаимодействует с встроенным на страницу проигрывателем видео.

Проблемы с несколькими видео

Что будет, если у вас на странице расположены несколько видео? Совсем не трудно предположить такие сценарии: например, несколько видео на странице с отзывами о компании. Или различные видео-инструкции, показывающие этапы настройки ПО на странице помощи. YouTube загружает несколько файлов для каждого видео в iframe (осуществляется 8 запросов).

Поэтому страницы, где есть несколько встроенных видео, могут загружаться намного медленнее из-за этих http-запросов и соответствующих загрузок файлов. Рис. 3. Страница видео-отзывов на PhillyDentistry.com Например, для страницы с видео-отзывами на сайте PhillDentistry.com были заметны существенные проблемы с загрузкой по мере того, как количество видео-отзывов росло.

Отображение статического «баннера» на месте видео с YouTube

Решение было найдено в том, чтобы получить статический «баннер» с YouTube и отображать его вместо встроенного видео. Когда пользователь кликает на кнопку проигрывания видео, начинается показ этого видео. Это можно сделать с помощью Javascript-кода, указанного ниже:

function youTubes_makeDynamic()

var $ytIframes = $(‘iframe[src*=»youtube.com»]’);

$ytIframes.each(function (i,e)

var $ytFrame = $(e);

Еще по теме: Как выложить печку на Ютубе

var ytKey; var tmp = $ytFrame.attr(‘src’).split(///); tmp = tmp[tmp.length — 1]; tmp = tmp.split(‘?’); ytKey = tmp[0];

var $ytLoader = $(»);

$ytLoader.append($(‘‘));

$ytLoader.data(‘$ytFrame’,$ytFrame);

$ytFrame.replaceWith($ytLoader);

$ytLoader.click(function ()

var $ytFrame = $ytLoader.data(‘$ytFrame’);

$ytFrame.attr(‘src’,$ytFrame.attr(‘src’)+’?autoplay=1′);

$ytLoader.replaceWith($ytFrame);

>);

$(document).ready(function () );

function youTubes_makeDynamic()

var $ytIframes = $(‘iframe[src*=»youtube.com»]’);

$ytIframes.each(function (i,e)

var $ytFrame = $(e);

var ytKey; var tmp = $ytFrame.attr(‘src’).split(///); tmp = tmp[tmp.length — 1]; tmp = tmp.split(‘?’); ytKey = tmp[0];

var $ytLoader = $(»);

$ytLoader.append($(‘‘));

$ytLoader.data(‘$ytFrame’,$ytFrame);

$ytFrame.replaceWith($ytLoader);

$ytLoader.click(function ()

var $ytFrame = $ytLoader.data(‘$ytFrame’);

$ytFrame.attr(‘src’,$ytFrame.attr(‘src’)+’?autoplay=1′);

$ytLoader.replaceWith($ytFrame);

>);

$(document).ready(function () );

Эффект от такого решения оказался очень существенным. Время загрузки страницы сократилось с 17,38 секунд до 3,6 секунд. Рис. 4. Результаты Webpagetest после оптимизации страницы. Рис. 5. Оптимизация страницы с видео-отзывами PhillyDentistry.com

Альтернативное внедрение видео YouTube

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

Не будем использовать iframe, а воспользуемся тэгом div, не будем указывать размер и разместим iframe на страницу только, если пользователь кликнет на кнопку проигрывания видео. Поскольку габариты проигрывателя не указаны, он займет по ширине весь родительский контейнер, а высота будет подобрана автоматически. Можно также вставлять несколько таких тэгов div с разными идентификаторами видео, если их нужно разместить на странице несколько. Далее вставим следующий код в шаблон вашей страницы. Он найдет все такие внедренные тэги и заменит их на миниатюры видео.

Обратите внимание, что браузеры Chrome и Safari на устройствах iOS и Android разрешают проигрывание HTML5 видео только по действию пользователя. Они блокируют автоматическое проигрывание внедренного видео, чтобы предотвратить скачивание больших объемов по сотовой связи.

Готовые решения для CMS

Выше был рассмотрен возможный вариант решения проблемы, если владелец сайта понимает Javascript в достаточной степени, чтобы применить это решение у себя на сайте. Это может оказаться не так просто на сайтах с различными популярными CMS, но, как правило, для них существуют отдельные плагины, которые также помогают ускорить страницы с большим количеством видео.

Ниже мы рассмотрим 4 плагина для WordPress, которые позволяют загружать видео из YouTube по принципу lazy-load, то есть, не блокируя отображение остальных элементов страницы. Плагин Lazy Load for Videos Этот плагин ускоряет страницы, заменяя встроенное видео на кликабельную картинку с превью этого видео.

Плагин a3 Lazy Load Плагин позволяет загружать в режиме lazy-load изображения и видео на сайте. Можно также исключить изображения и видео из действия плагина по их имени класса. Плагин совместим с WooCommerce. Плагин Lazy Load XT Этот плагин позволяет загружать в режиме lazy-load изображения, видео из YouTube или Vimeo и содержимое iframe-ов.

Легкий и быстрый плагин. Плагин WP YouTube Lyte Этот плагин вместо полноценных видео внедряет на сайт «легкие» элементы, которые запускают проигрыватель видео, если кликнуть по ним. В заключение отметим еще раз, что стандартный способ внедрения видео из YouTubе через iframe негативно сказывается на скорости загрузки страницы.

Проблема возрастает многократно, если на странице представлены несколько видео. Для решения этой проблемы можно воспользоваться приведенным решением на Javascript. Если вы используете какую-либо популярную CMS, стоит поискать соответствующие плагины для нее, аналогичные 4-м плагинам для WordPress, которые упомянуты выше.

Источник: searchengines.guru

Как сделать видео с Ютуба фоном на сайте