Lite YouTube Embeds — лучший способ встраивания видео YouTube на ваш сайт

Встроить видео с YouTube легко, но вы будете удивлены, узнав, какой дополнительный вес может добавить к вашим веб-страницам одно встраивание видео с YouTube. Браузер должен загрузить ~800 КБ данных (см. снимок экрана) только для рендеринга видеоплеера YouTube. И эти файлы загружаются еще до того, как посетитель нажмет кнопку воспроизведения.

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

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

Встраивайте видео с YouTube без увеличения размера страницы

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

Миниатюрное изображение кадра видео на YouTube имеет размер около 15 КБ, поэтому мы можем уменьшить размер веб-страницы почти на МБ.

Облегченная демонстрация встраивания YouTube

Откройте эту демонстрационную страницу, чтобы увидеть технику Google+ в действии. Первое видео на странице встроено с использованием кода IFRAME по умолчанию, а второе видео использует упрощенный режим, который загружает видео YouTube только по запросу.

Когда пользователь нажимает кнопку воспроизведения, уменьшенное изображение заменяется стандартным видеоплеером YouTube с автоматическим воспроизведением, установленным на 1, поэтому видео будет воспроизводиться практически мгновенно. Большим преимуществом является то, что дополнительный JavaScript-код YouTube загружается только тогда, когда кто-то решает посмотреть встроенное видео, а не иначе.

Легкие и отзывчивые вставки YouTube

Стандартный код встраивания для YouTube использует тег IFRAME, в котором ширина и высота видеопроигрывателя фиксированы, что делает проигрыватель неотзывчивым.

Новый код для встраивания по запросу для YouTube является адаптивным и автоматически настраивает размеры проигрывателя в зависимости от размера экрана посетителя.

Адаптивное встраивание видео с YouTube — руководство

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

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

Мы не будем назначать высоту и ширину, так как видеоплеер автоматически будет занимать ширину родителя, а высота вычисляется автоматически. Вы также можете вставить несколько блоков DIV с разными идентификаторами видео, если вам нужно встроить несколько видео YouTube на одну страницу.

Шаг 2: Скопируйте и вставьте код JavaScript в любое место вашего веб-шаблона. Сценарий находит все встроенные видео на веб-странице, а затем заменяет элементы DIV миниатюрами видео и кнопкой воспроизведения (см. демонстрацию).

 < script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >

Шаг 3: Скопируйте и вставьте CSS перед закрывающим тегом head вашего веб-шаблона.

 < style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >

Вы можете увидеть легкую технику встраивания YouTube в действии на этой странице Codepen.

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

Учебники по встраиванию YouTube

1. Вставьте видео YouTube с отключенным звуком
2. Разместите видео YouTube в качестве фона веб-страницы
3. Вставьте только часть видео YouTube