Фреймы Youtube — Зло!

Разбираемся почему и как теперь с этим жить!

Видео на сайте — это хорошо. На строительном сайте — вдвойне!

Современный рынок, в особенности строительный, диктует всем нам свои тенденции. Обычным, даже ~~приличным~~ хорошим строительным сайтом, уже никого не удивишь. Клиент часто задается вопросом: у кого строить? Как не промахнуться с подрядчиком?

Очень важным фактором доверия к строительной компании является наличие у неё на сайте «живых» видео-отзывов реальных заказчиков. Почему?

Ни для кого не секрет, что текстовые красивые отзывы можно заказать на любом тематическом портале за копейки.
Вывод = Текстовые отзывы - нет доверия! Инфа 100% =)
Отзывы в соцсетях - это уже лучше. Пишут разные люди. НО! Сейчас уже и в соцсетях вполне можно найти исполнителей, которые с радостью напишут хвалебный отзыв о ком/чём угодно, за небольшие деньги, а иногда и вовсе за лайки =)
Вывод = Отзывы в соцсетях - доверие 50/50
А что с видео-отзывами? Найти и снять на видео людей, да еще и на фоне свежих домов/бань - процесс замороченный и трудоемкий. Тут процент «фейков» минимален.
Вывод = Видео-отзывы - Доверие есть!

С необходимостю размещения видео-отзывов на строительном сайте разобрались. Теперь разберемся, как это сделать не в ущерб сайту.

Как правило, размещение 1-2 фреймов youtube на странице особо не влияет на производительность.

Если же на одной странице сайта надо разместить не один десяток видео-отзывов — надо быть готовым к диким тормозам!

С такой ситуацией мы сами столкнулись несколько лет назад у нескольких заказчиков. Когда количество видео-отзывов на странице стало переваливать за 50 - страница грузилась дико долго, процент отказов резко увеличивался (посетители сайта просто не дожидались загрузки и закрывали отзывы) - и видео-отзывы стали не пользой для сайта и продаж - а вредом, в том числе и для продвижения.

Надо было что-то делать - и решение было найдено!

Теперь пойдет техчасть!

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

Вместо кода фрейма:

Вставляем ссылку с картинкой:

/* Как видно из кода, в ссылке мы используем тот же иденитификатор видео (в нашем примере "_AX9k0IoYNQ"), что и во фрейме. Картинка забирается напрямую с серверов youtube. */

<a class="youtube" href="https://www.youtube.com/watch?v=_AX9k0IoYNQ" data-fancybox="">
<img src="https://img.youtube.com/vi/_AX9k0IoYNQ/0.jpg"/>
</a>

Не забываем подключить jquery и fancybox (если они еще не подключены и открывать будем в модальном окне) и настроить css:

/* html код подключения jquery и fancybox */

<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"/> src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"</script>

/* css код ссылки, приводим к примерному виду отображения фрейма */

a.youtube {
    position:relative;
    display:block;
}
a.youtube img {
    width:100%;
    max-width:100%;
}
a.youtube:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(/images/ytplay.png) no-repeat center center;
    /* саму картинку кнопки заливаем к себе на сайт */
    transition:.2s;
    opacity:0.7;
    filter:grayscale(100%);
}
a.youtube:hover:after {
    opacity:1;
    filter:grayscale(0%);
}

Кстати, вот полный список адресов, откуда взять разного формата картинки с серверов youtube по их id (на примере видео с id "JMJXvsCLu6s"):
Важно! Если видео не hd-качества, то крупные превью не будут сгенерированы youtube!

<img src="//img.youtube.com/vi/JMJXvsCLu6s/3.jpg"> /* 120x90px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/2.jpg"> /* 120x90px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/1.jpg"> /* 120x90px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/default.jpg"> /* 120x90px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg"> /* 320x180px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/hqdefault.jpg"> /* 480x360px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/0.jpg"> /* 480x360px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/sddefault.jpg"> /* 640x480px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/maxresdefault.jpg"> /* 1280x720px */