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

1. Легкие и адаптивные YouTube-встраивания
2. Вставить видео YouTube отзывчиво - учебник
3. Учебники по встраиванию на YouTube

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

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

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

Размер миниатюрных изображений YouTube составляет около 15 КБ, поэтому мы можем уменьшить размер веб-страниц в байтах на 500+ КБ. Это огромно!

Приведенное выше видео встроено с использованием той же технологии по требованию ( демонстрация ).

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

Легкие и адаптивные YouTube-встраивания

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

Новый код для вставки по требованию для YouTube немного отличается. Вам не нужно указывать размер плеера, так как мы сейчас встраиваем видео в ответ. Кроме того, IFRAME заменяется тегом DIV, а IFRAME добавляется на страницу только тогда, когда посетитель нажимает кнопку воспроизведения.

Вставить видео YouTube отзывчиво - учебник

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

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

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

Затем разместите JavaScript в любом месте вашего веб-шаблона. Он находит все встроенные видео на веб-странице, а затем заменяет элементы DIV миниатюрами видео.

<script> / * Light YouTube Embeds by @labnol * / / * Веб: 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 = '<img src = "https://i.ytimg.com/vi/ID/hqdefault.jpg">', play = '<div class = "play"> </ div > '; 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); } </ script>

Наконец, вставьте CSS перед тегом заголовка вашего веб-шаблона.

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

<style> .youtube-player {position: родственник; прокладка снизу: 56,23%; / * Используйте 75% для видео 4: 3 * / высота: 0; переполнение: скрытое; максимальная ширина: 100%; фон: # 000; поле: 5px; } .youtube-player iframe {position: absolute; верх: 0; слева: 0; ширина: 100%; высота: 100%; z-индекс: 100; фон: прозрачный; } .youtube-player img {bottom: 0; дисплей: блок; слева: 0; наценка: авто; максимальная ширина: 100%; ширина: 100%; положение: абсолютное; справа: 0; верх: 0; граница: нет; высота: авто; курсор: указатель; -webkit-transition: .4s все; -моз-переход: .4с все; переход: .4s все; } .youtube-player img: hover {-webkit-filter: яркость (75%); } .youtube-player .play {height: 72px; ширина: 72 пикселя; слева: 50%; верх: 50%; поле слева: -36px; margin-top: -36px; положение: абсолютное; background: url ("// i.imgur.com/TxzC70f.png") no-repeat; курсор: указатель; } </ style>

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

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

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

Похожие

Комментарии