Как правильно установить видео YouTube на сайт

Как правильно установить видео YouTube на сайт

Узнайте, Как правильно установить видео YouTube на сайт без излишней нагрузки на веб-страницы. Код вставки простой, легкий и мобильно удобный.

При установки любого видео YouTube на вашем сайте, если использовать стандартные теги IFRAME, вы удивитесь, когда узнаете, сколько лишнего веса добавляет видео YouTube на веб-страницу. Загружается около 0,5 МБ дополнительных ресурсов и используется более 10 HTTP запросов (CSS, JavaScript и изображения) для вставки видеоплеера YouTube и файлы будут загружатьcя, даже если посетитель на вашем сайте решил не смотреть встроенного видео YouTube.

Встроенное видео делает вашу страницу

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

 

Загрузка видео-плеера YouTube

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

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

Как правильно установить видео YouTube на сайт

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

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

<iframe width="320" height="180"
 
src="http://www.youtube.com/embed/LcIytqkbdlo">
 
</iframe>

 

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

Этот код для вставки видео несколько отличается, потому, что код IFRAME для вставки добавляется только после того, как пользователь нажимает на кнопку воспроизведения.
Скопируйте и установите следующий фрагмент кода в том месте вашей веб-страницы, где вы хотели бы вставить видео. Не забудьте заменить “VideoID” на действительный идентификатор видео YouTube. Коды CSS и JavaScript добавляются в шаблон отдельно. Кроме того, нет необходимости добавлять высоту и ширину параметра, так как видео будет автоматически занимать родительскую ширину, высота вычисляется также автоматически.

HTML
<div class="youtube-container">
 
<div class="youtube-player" data-id="VIDEOID"></div>
 
</div>

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

 

JavaScript

Функция JavaScript будет сканировать ваши страницы для встроенных видео YouTube. Если будет установлено, оно добавит соответствующее уменьшенное изображение, а также добавит значек OnClick, который будет делать волшебство — заменять изображение, на реальное видео YouTube в режиме автозапуска.

JavaScript
<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
 
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

CSS

Откройте файл CSS вашего сайта и вставьте следующий фрагмент кода. Если у вас нет отдельного файла CSS, вы можете также поместить его непосредственно перед закрывающим тегом вашего веб-шаблона.

CSS
<style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>

Этот метод позволяет уменьшить размер ваших веб — страниц на 300-400 КБ и делает видео YouTube адаптивным для мобильных устройств. Теперь вы знаете, как правильно установить видео YouTube на сайт, если не понятно, смотрите видео-урок выше.

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *