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

* *

Как вставить видео с 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 + "?

Реклама

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

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

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

Федеральное агентство по туризму
Сафонов Олег Петрович

Украинские новости информационное агентство
© UNIAN.NET, 1998 - 2017 Все права соблюдены. Согласно статье 26 Закона Украины "Об информационных агентствах" право собственности на продукцию информационного агентства охраняется

Донецкое агентство новостей
Декабрь 14, 2018 12:25 Фото: Минкультуры ДНР. Донецк, 14 дек – ДАН. Почти 3800 человек за три с лишним месяца посетили в Донецке выставку «Великая Отечественная война в цифрах и фактах», посвященную

Про затвердження Порядку організації та проведення особистого прийому громадян у Державному агентстві резерву України, Міністерство економічного розви
МІНІСТЕРСТВО ЕКОНОМІЧНОГО РОЗВИТКУ І ТОРГІВЛІ УКРАЇНИ 24.09.2012  № 1041 Зареєстровано в Міністерстві |юстиції України 9 жовтня 2012 р. за № 1703/22015 Про затвердження Порядку організації та проведення

Сегодня в Информагентстве «НАШ ПРОДУКТ» состоялся круглый стол на тему: «Каков диагноз больничных касс?»
04 ноя 2010, 17:28    admin 0 комментариев    2 396 просмотров Участники мероприятия активно обсуждали вопросы создания больничных касс в Киеве с начала 2011 года, откуда

Федеральное агентство по рыболовству
  Официальное наименование Федеральное агентство по рыболовству   Официальное сокращенное наименование Росрыболовство   Действует на основании Положения, утвержденного Постановлением

15 лучших печатных реклам 2013 года
Креативные агентства разрабатывают огромное количество разных рекламных кампаний: одни удивляют своей оригинальностью и свежими идеями, другие — шокируют эпатажными образами. Но несмотря на разнообразие

Совместный проект Профессионалов.ru и "Секрета Фирмы" - "Банк решений". Кейс четырнадцатый - "Сеть без дыр"... — Бизнес-клуб
Уважаемые профессионалы, чуть более года назад мы запустили совместный с ведущим деловым журналом «Секрет Фирмы» проект по решению задач из реальнойбизнес-практики «Банк решений». Многие из вас уже успели


Реклама

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

Реклама

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

Реклама