* РБК — новости

* *

Как вставить видео с YouTube без ущерба для загрузки вашего сайта

  1. Загружайте файлы плеера при нажатии на видео
  2. Как вставить Youtube видео на свой сайт с помощью этой техники
  3. HTML
  4. CSS
  5. 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 + "?

Реклама

Популярные новости

Агентство по эскорт услугам
У многих слово «эскорт» ассоциируется с элитным сопровождением, дорогими машинами и длинноногими красавицами-моделями, которых богатые владельцы крупных фирм берут с собой на светские рауты в качестве

Франшиза страхового агентства
К Вашему вниманию франшиза страхового агентства — Точка Страхования. Основными направлениями деятельности являются реализация полисов ОСАГО и КАСКО. Что входит в франшизу• Техническая поддержка наших

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

Федеральное агентство по техническому регулированию
В 2003 году, 1 июля, вступил в действие ФЗ, определяющий основы технического регулирования. В рамках закона создана новая система установления норм для производственных процессов, продукции, услуг и работ.

Btl агентство полного цикла
Нередко рекламные услуги заказываются одновременно у нескольких поставщиков: одна фирма выполняет полиграфию, другая проводит исследование рынка, третья следит за общей успешностью проводимых мероприятий.

Русское агентство новостей
Русское Агентство Новостей (РуАН) создано, как альтернатива разнузданному, повсеместному шабашу, развёрнутому в СМИ равнодушными, недалёкими, продажными и недружественными к нормальным людям персонажами,

Мегаполис сервис агентство недвижимости
Агентство недвижимости «Мегаполис Сервис», предлагает все виды риэлторских услуг на рынке недвижимости. Купля-продажа, обмен квартир, домов, комнат, земельных участков, коттеджей, коммерческой недвижимости.

Сдать квартиру через агентство
Почему стоит держаться подальше от агентств недвижимости Что бы ответить на первый вопрос и понять почему идея сдать квартиру через агентство не самая блестящая, мне придется процитировать книгу “6

Агентство по подбору домашнего персонала
Проблема поиска хорошей няни, надежной помощницы по хозяйству, квалифицированного репетитора для ребенка или сиделки для пожилого родственника знакома многим людям. Избавить их от множества хлопот по


Реклама

Календарь новостей

Реклама

Архив новостей

Реклама