- Загружайте файлы плеера при нажатии на видео
- Как вставить Youtube видео на свой сайт с помощью этой техники
- HTML
- CSS
- Javascript
Как мы видели в других случаях, скорость загрузки Это определяющий фактор в SEO, который может отодвинуть ваш сайт от верхних позиций поисковых систем. Тем не менее, необходимость минимизировать вес сети и количество запросов к серверу часто приводит к тому, что мы исключаем элементы, которые могут обогатить наш контент и развлечь пользователя, чтобы он проводил больше времени на странице: мы ссылаемся на вставку видео с YouTube.
Вставить видео на веб-сайт очень просто, на YouTube их много, и их даже можно настроить в соответствии с внешним видом нашего сайта. Но если мы проанализируем страницу со встроенными видео, мы увидим, что не все преимущества: видео медленное и тяжелое, даже если оно не подается с нашего собственного сервера.
Вставка видео с YouTube не только значительно увеличивает количество запросов к серверу, но и увеличивает общий вес страницы более чем на 500 Кб, что серьезно ухудшает скорость загрузки Интернета. К счастью, есть решение, которое может уменьшить все эти запросы до одного на видео, уменьшив вес до 50 Кб. В этом посте мы покажем, как это сделать.
Загружайте файлы плеера при нажатии на видео
Каждое видео на Youtube содержит серию предыдущих изображений, которые мы можем принести на наш сайт с помощью Javascript. Идея состоит в том, чтобы заменить оригинальный iframe, в котором находится полный проигрыватель, предыдущим изображением видео, на которое мы собираемся наложить кнопку, имитирующую воспроизведение Youtube.
Когда пользователь нажимает на воспроизведение, изображение будет немедленно заменено проигрывателем Youtube, поэтому ресурсы будут загружаться только тогда, когда пользователь решит просмотреть видео, а не при загрузке страницы.
Как вы можете видеть ниже, эффект практически незаметен для пользователя:
Увидеть перо LkjERp Августин ( @abaraza ) на CodePen ,
Как вставить Youtube видео на свой сайт с помощью этой техники
Код состоит из 3 частей, которые мы должны добавить на страницу, где будут воспроизводиться видео.
HTML
Прежде всего, необходимо поместить этот HTML-код в ту часть страницы, где будет отображаться видео, включая в атрибуте «data-id» уникальный идентификатор видео YouTube, которое вы хотите визуализировать.
<div class = "container"> <div class = "player" data-id = "QMgSELBA7kw"> </ div> </ div>Уникальный идентификатор получен из самого URL, который показывает YouTube при воспроизведении видео:
https://www.youtube.com/watch?v= QMgSELBA7kw
Чтобы вставить более одного видео, нам просто нужно скопировать этот HTML несколько раз, меняя идентификатор на тот, который соответствует каждому из видео.
CSS
Чтобы отформатировать набор и адаптировать видео к окну браузера, мы должны добавить следующие стили в наш CSS-файл или непосредственно на страницу с помощью тегов <style> </ style>:
<style> .container {display: block; маржа: 20px авто; ширина: 100%; максимальная ширина: 600 пикселей; } .replayer {display: block; ширина: 100%; высота: 100%; нижнее дно: 56,25%; переполнение: скрытое; положение: относительное; курсор: рука; курсор: указатель; } img.image-previous {display: block; слева: 0; низ: 0; наценка: авто; максимальная ширина: 100%; ширина: 100%; положение: абсолютное; справа: 0; верх: 0; height: auto} div.youtube-play {height: 64px; ширина: 64 пикселя; слева: 50%; верх: 50%; поле слева: -36px; margin-top: -36px; непрозрачность: 0,7; положение: абсолютное; background: url ("https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-64.png") no-repeat; } div.youtube-play: hover {opacity: 1; } # youtube-iframe {width: 100%; высота: 100%; положение: абсолютное; верх: 0; слева: 0; } </ style>Javascript
Наконец, для того, чтобы все это изобретение заработало, нам нужно добавить следующий Javascript на страницу, где будут отображаться видео, либо непосредственно, поместив его между тегами <script> </ script>, либо добавив его в файл JS, который мы позже вызовем из страница
<script> (function () {var v = document.getElementsByClassName ("player"); for (var n = 0; n <v.length; n ++) {var p = document.createElement ("div"); стр. innerHTML = labnolThumb (v [n] .dataset.id); p.onclick = labnolIframe; v [n] .appendChild (p);}}) (); function labnolThumb (id) {return '<img class = "preview-image" src = "// i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class =" youtube-play " > </ 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> Следующие две вкладки изменяют содержимое ниже.
Компьютерный и компульсивный блогер (иногда я даже помню, чтобы спать). В настоящее время я занимаюсь SEO.
Com/watch?Id + "?
