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

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

встроить видео Youtube без увеличения размера страницы

Теперь несуществующий Google+ работал очень умную технику для встраивания видео YouTube. Когда страница была первоначально загружена, Google+ будет встраивать только миниатюру изображения Youtube Video и фактический видеоплеер был загружен только тогда, когда пользователь нажал внутри миниатюра.
Изображение кадров миниатюры видео YouTube находятся в размере 15 кб, поэтому мы можем уменьшить размер веб-страниц практически на MB.

Облегченная демонстрация встраивания 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 с миниатюрами видео и кнопку воспроизведения (см. Demo).
<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 перед закрывающим тегом заголовка вашего веб-шаблона.
<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 только при взаимодействии с пользователем. Они блокируют автоматическое воспроизведение встроенных медиафайлов, чтобы предотвратить нежелательную загрузку по сотовым сетям.