Адаптивная вёрстка, урок второй. Адаптивное видео на сайте
В этом уроке вы узнаете, как добавить видео на сайт с помощью элементов и , а также как сделать контейнер с видео адаптивным.
Тег позволяет воспроизводить видео со сторонних ресурсов, таких как YouTube и Vimeo. Элемент создаёт на странице вложенную область, в которую загружается другая html-страница (при наличии атрибута src ) или любой другой контент. Элемент не должен находиться внутри элемента или . Для элемента доступны глобальные атрибуты, а также собственные:
Как сделать адаптивное видео на сайте

1. Адаптивное HTML5 видео
Когда элемент впервые стал появляться на страницах сайтов, для воспроизведения видео-файлов необходимо было добавлять три файла в форматах .mp4 (для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7), .webm (для Firefox4, Opera, и Chrome) и .ogg/ogv (для старых версий браузеров Firefox и Opera). В настоящее время все современные браузеры поддерживают формат .mp4 .
Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим элементу следующие свойства:
video
2. Адаптивное видео с YouTube или Vimeo
Видео с YouTube или Vimeo добавляется на страницу с помощью элемента . Для управления адаптивностью видеоплеера обернём фрейм дополнительным блоком с классом thumb-wrap . Получить код фрейма Vimeo можно по кнопке Share , далее значок тега. На YouTube нужно щёлкнуть правой кнопкой мыши по видео, далее «Копировать HTML-код».
Видео Vimeo
Видео YouTube
Чтобы сделать адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:
.thumb-wrap < position: relative; padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */ height: 0; overflow: hidden; >.thumb-wrap iframe
Оптимизируем видео из 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.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.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 с разными идентификаторами видео, если их нужно разместить на странице несколько. Далее вставим следующий код в шаблон вашей страницы. Он найдет все такие внедренные тэги и заменит их на миниатюры видео.
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function()
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++)
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
>
>);
function labnolThumb(id)
var thumb = ' ',
play = ' ';
return thumb.replace("ID", id) + play;
>
function labnolIframe()
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
>
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function()
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++)
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
>
>);
function labnolThumb(id)
var thumb = ' ',
play = ' ';
return thumb.replace("ID", id) + play;
>
function labnolIframe()
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
>
.youtube-player img:hover
-webkit-filter: brightness(75%);
>
Обратите внимание, что браузеры 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, которые упомянуты выше.
Как загрузить видео на WordPress-сайт

Видеоролики – это неотъемлемая часть любого блога или информационного ресурса. Благодаря им восприятие контента усиливается в разы: изучать инструкции и руководства всегда продуктивнее, когда они подкрепляются соответствующими роликами. Если под вашим контролем сайт на WordPress, то клипы удобнее всего загружать через YouTube.
Поговорим в сегодняшней статье о том, как все это работает, и загрузим видео на сайт всеми возможными способами.
Встраиваем видео на сайт
Загрузка видеороликов на WordPress может быть выполнена 4 способами: вручную, с компьютера, с помощью кода или специального плагина. Сначала потребуется создать новую запись (страницу), а затем добавить в нее блок с видео. Сделать это можно следующим образом:
- Открываем административную панель WordPress и в левом меню выбираем «Записи» -> «Добавить новую».

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

- Для наглядности добавим еще небольшой заголовок «Посмотрите на это!». Здесь можете написать что угодно. Затем обратите внимание на появившийся ниже блок – он содержит весь необходимый нам функционал.

Вот с этим окном мы и будет работать: давайте рассмотрим все возможные способы загрузки видео в WordPress.
Способ 1: видео с YouTube
В данном случае нам потребуется зайти на YouTube и открыть там нужный видеоролик. Затем воспользоваться функцией «Поделиться» и скопировать оттуда ссылку, которая потребуется для WordPress. Рассмотрим, как это делается на небольшом примере:
- Открываем на YouTube ролик, который нужно вставить на сайт, под ним выбираем «Поделиться».

- Отсюда копируем ссылку на ролик и возвращаемся к блоку с видео, что мы создали ранее.

- Здесь выбираем «Вставить с сайта» и вставляем скопированную ранее ссылку. В завершение жмем на кнопку добавления видеоклипа.

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

Такими несложными действиями мы можем добавить любой клип из YouTube. Можно добавить ролик и с других ресурсов, но только в том случае, если они поддерживают размещение роликов на сторонних площадках.
Способ 2: загружаем видео с компьютера
Если вы хотите загрузить ролик, которого еще нет в интернете, то этот способ для вас. Здесь все еще проще: в блоке с видео достаточно нажать на кнопку «Загрузить». В результате отобразится дополнительное окно, в котором нужно найти необходимый ролик на компьютере.

Таким образом, видео будет добавлено на сайт. Останется только опубликовать запись и готово.

Обратите внимание на то, что мы можем создавать несколько таких блоков. В каждом из них могут быть размещены ролики как со сторонних площадок, так и с компьютера.
Способ 3: с помощью плагина
Для WordPress существует множество плагинов, позволяющих встраивать видео. Об их преимуществах мы сегодня еще поговорим, а пока давайте попробуем расширение ARVE. Его особенности – возможность автоматического запуска видеороликов, адаптивность и настройка соотношения сторон. Рассмотрим, как им пользоваться:
- Первым делом нам понадобится установить расширение – для начала скачаем его с официального сайта на компьютер.

- Возвращаемся в админку WordPress и переходим в раздел «Плагины» -> «Добавить новый». В правой части жмем на «Загрузить плагин» и добавляем загруженный ранее архив. После этого жмем «Установить».

- После успешной установки нам предлагают активировать плагин. Выполняем.

- Теперь мы можем загрузить видео с помощью шорткода. Для этого нам потребуется добавить новый блок с соответствующим названием.

- Вставляем код [arve url=»https://youtu.be/Qh3VebBauwo» /], где url – ссылка на видео. В первом способе мы ее получали через вкладку «Поделиться».

Проверить, был ли ролик корректно добавлен, мы не можем. Мы увидим его только после публикации записи.
Способ 4: встраивание html-кода
Сервисы типа YouTube позволяют встраивать видеоролики через код – для этого необходимо открыть нужный клип на сервисе и через вкладку «Поделиться» скопировать блок кода. Затем его можно вставить в WordPress через редактор записи. Работает это следующим образом:
- Открываем видеоролик на YouTube и жмем «Поделиться».

- Выбираем «Встроить».

- Следующим шагом копируем предложенный нам код.

- Возвращаемся в административную панель WordPress и добавляем к записи блок «Код».

- Вставляем скопированный код и жмем в верхнем левом углу блока на кнопку в виде иконки кода.

- Выбираем «Преобразовать в форматированный».

- В результате перед нами отобразится видеоролик из YouTube.

Аналогичным образом мы можем вставлять видеоролики и с прочих ресурсов. Однако в некоторых случаях может потребоваться знание HTML, так как не везде есть удобная функция встраивания видео, как на YouTube.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Зачем использовать видеоплагины
Выше мы уже рассмотрели работу одного плагина. Их преимущества:
- видеоплагины разрешают стилизовать отображение видео без знания CSS;
- с помощью специальных расширений можно добавить функцию скачивания видео;
- плагины позволяют добавлять субтитры к роликам;
- они могут сохранить местоположение видео, запомнив позицию воспроизведения;
- также вы можете включить аналитику видео, чтобы анализировать поведение пользователей.
С помощью подобных плагинов мы можем получить доступ к тем функциям, которых нет в обычном арсенале.
11 лучших плагинов для вставки видео на сайт WordPress
Существует огромное множество расширений, позволяющих вставлять видеоролики на сайт. Мы же не будем рассматривать все, а поговорим лишь о тех, что заслуживают особого внимания. Это такие плагины, как YouTube Embed, WP Video Lightbox, Video Gallery and Player, ARVE Advanced Responsive Video Embedder, Responsive Video Light, FV Flowplayer Video Player, Video Embed & Thumbnail Generator, CP Media Player, Brid Video Easy Publis, HTML5 Video Player, Easy Video Player.
Давайте посмотрим, какие функции и возможности они предоставляют.
YouTube Embed

Плагин YouTube Embed предлагает пользователям несколько способов настройки видео. Один из них – возможность создания галереи, включающей в себя плейлисты и списки каналов. Сам плагин распространяется бесплатно, однако имеет пожизненную премиум-версию за $19.99.
- бесплатная версия включает в себя все основные функции;
- премиум-версия за единоразовый платеж;
- позволяет настроить запуск видео в определенное время с выбранной громкостью.
Стоимость: бесплатно или $19.99
Ссылка на скачивание: YouTube Embed
WP Video Lightbox

Плагин WordPress Video Lightbox позволяет вставлять видео на страницу, используя наложение на лайтбокс. Его можно использовать для отображения изображений, Flash, YouTube, Vimeo, iFrame и так далее. Встроенные видео также можно просматривать на всех смартфонах.
- возможность загружать видео с YouTube по https;
- можно отключать рекомендованные ролики в конце Ютуб-клипа;
- режим повышенной конфиденциальности;
- автовоспроизведение роликов;
- более 20 различных настроек.
Стоимость: от $39.95
Ссылка на скачивание: WP Video Lightbox
Video Gallery and Player

Уже из названия понятно, что данный плагин позволяет создавать галерею видеороликов. С его помощью можно легко добавить ролики из YouTube или Vimeo, которые будут отображены в виде сетки. Процесс создания видеогалереи занимает всего несколько минут: в последующем она может отображаться на любой странице с помощью шорткода WordPress.
- поддержка Elementor, Beaver и SiteOrigin Page Builder;
- пользовательские CSS-свойства;
- 20 предустановленных шаблонов оформления галереи;
- поддержка слайдера RTL.
Стоимость: бесплатно или от $29 за премиум
Advanced Responsive Video Embedder

Ранее мы уже рассматривали работу данного плагина, но поговорили лишь о малой части его функционала. ARVE автоматически делает видео адаптивным, поддерживает практически все видеохосты, а также отлично работает с автовоспроизведением. Видео можно настроить таким образом, чтобы оно работало только в десктопной или мобильной версии.
- улучшенная SEO-составляющая с возможностью указания заголовка, описания и даты загрузки;
- поддержка WYSIWYG, который позволяет работать с шорткодами и предварительным просмотром;
- возможность использовать более унифицированные шорткоды, благодаря которым можно более детально настраивать встраиваемое видео;
- пользовательские настройки CSS.
Стоимость: бесплатно
Responsive Video Light
Responsive Video Light поддерживает все, что только нужно пользователю. Не будем останавливаться на его описании, давайте сразу перейдем к особенностям:
- в видеороликах Vimeo может быть отключен заголовок и прочая информация;
- видеоролики YouTube поддерживают светлые и темные темы, автовоспроизведение и показ информации;
- в видеороликах YouTube есть атрибут shortcode, который позволяет включать или отключать связанные видео («связанные видео» – это те ролики, которые отображаются в конце клипа);
- полный экран настроек, объясняющий и показывающий все параметры и синтаксис.
Стоимость: бесплатно
FV Flowplayer Video Player

FV Flowplayer Video Player – это бесплатное и простое решение для тех, кто хочет встраивать видеоролики с YouTube и Vimeo. Плагин поддерживает такие форматы, как FLV и MP4.
- автоматическая проверка кодировки видео для авторизованных пользователей;
- все расширенные функции доступны в стандартной лицензии (Google Analytics, Cuepoints, Native fullscreen, субтитры, замедленное видео, поддержка Retina);
- сверхэффективный проигрыватель: всего 181 Кб JavaScript и 10 Кб Flash-кода;
- полная поддержка Amazon S3, Cloudfront и других CDN;
- поддерживает видеорекламу Video Intelligence.
Стоимость: бесплатно
Video Embed & Thumbnail Generator

Video Embed & Thumbnail Generator – это мощный плагин с открытым исходным кодом. Как и все предыдущие аналоги, он позволяет всего в несколько кликов добавлять на страницы сайта различные видеоклипы.
- поддержка gtag Google Analytics;
- гибкая настройка соотношения сторон;
- поддержка пользовательского формата WEBM VP9.
Стоимость: бесплатно
CP Media Player

CP Media Player – это и аудиоплеер, и видеоплеер, поддерживающий такие форматы, как MP4, OGG, WebM, MP3, WAV, и файлы субтитров WebSRT.
- поддержка многих аудио- и видеоформатов;
- включает в себя различные шаблоны тем;
- поддерживает все популярные браузеры, а также смартфоны.
Стоимость: бесплатно или €29.99
Ссылка на скачивание: CP Media Player
Brid Video Easy Publis

Brid Video – это бесплатная система, в которую можно добавлять ролики из YouTube. Плагин предлагает предварительный просмотр видео или плейлиста в реальном времени. Brid Video также обладает функцией монетизации: пользователи могут добавлять собственные видеоролики и зарабатывать на них деньги.
- поддержка VAST 3 и 4 и VPAID 2.0 для монетизации видео;
- 33+ специально разработанных темы;
- видеохостинг Amazon CDN;
- неограниченное кодирование и хранение видеороликов.
Стоимость: бесплатно или от $24.99
Ссылка на скачивание: Brid Video Easy Publis
HTML5 Video Player

HTML5 Video Player – это бесплатный, простой, доступный, легкий в использовании и полностью настраиваемый видеоплеер, работающий на всех устройствах.
- совместимость с HTML5, работает во всех браузерах;
- предварительный просмотр видео;
- доступна функция автовоспроизведения ролика;
- pro-версия позволяет добавлять ролики из любых сторонних источников;
- доступна возможность изменять скорость и качество видеороликов, однако сделать это можно только в pro-версии.
Стоимость: pro версия от $30
Ссылка на скачивание: HTML5 Video Player
Easy Video Player
Easy Video Player – удобный WordPress-плагин для публикации видеороликов. Он позволяет встраивать как видео, размещенные на собственном хостинге, так и видео, размещенные на внешнем сервере, используя прямые ссылки.
- автовоспроизведение видео;
- возможность изменять размер окна ролика;
- зацикливание клипов;
- множество различных шаблонов для плеера.
Стоимость: бесплатно
Ссылка на скачивание: Easy Video Player
Заключение
Сегодня мы разобрали 4 основных способа загрузить видео на сайт WordPress. Хоть стандартный функционал и позволяет встраивать видео без особых усилий, использование плагинов является наиболее удобным и функциональным вариантом. Благодаря им мы можем настроить элементы управления, использовать параметры отображения, вывести дополнительные опции для посетителей и сделать многое другое. В общем, если вам нужно как-либо модифицировать отображение видеороликов – используйте плагины.
Не могу вставить ютуб ссылку в хтмл?
У меня выходит Сайт www.youtube.com не позволяет установить соединение.
2 ответов
Спасибо Вам большое, помогли)
Так и должно быть, потому что ссылка в iframe у вас для просмотра видео в youtube:
https://www.youtube.com/watch?v=eChMg8721FA
А для встраивания видео на сайта из YouTube нужно использовать специальную ссылку для встраивания (как в видео показано). Нужно перейти на YouTube видео и нажать на Share, потом на самую первую кнопку Embed и скопировать из src ссылку для встраивания. Для вашей ссылки это будет такая:
https://www.youtube.com/embed/eChMg8721FA
И соответственно iframe получится такой:
Sign up or Log in to write an answer
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Общие ссылки
- Отзывы
- Политика конфидециальности
- Условия использования
- Блог
- Цена и оплата
- Курсы и скринкасты
- Сертификаты
- Партнерская программа
- Комьюнити
Наши курсы и скринкасты
- HTML/CSS Advanced
- Bootstrap 4
- Vue JS
- Linux, GIT and web-hosting
- HTML and CSS
- Modern Javascript
- Javascript/jQuery
- Codeigniter
- Все курсы и скринкасты

'));
'));