Заказать звонок +7 (900) 015-57-77 info@bobers.ru
Лого Бобров
15 января 2021

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

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

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

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

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

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

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

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

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

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

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

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

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

<iframe width="100%" height="263" src="https://www.youtube.com/embed/X6E8N_b5fZY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>

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

/* Как видно из кода, в ссылке мы используем тот же иденитификатор видео (в нашем примере "_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"> /* 120x90px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/sddefault.jpg"> /* 640x480px */
<img src="//img.youtube.com/vi/JMJXvsCLu6s/maxresdefault.jpg"> /* 1280x720px */

Скорость: было / стало

Для теста мы сделали 2 идентичные максимально легкие html-странички:

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

На тестируемом компьютере разработчика страница с фреймами грузится примерно от 4000 до 5000 мс, страница без фреймов - от 300 до 400 мс!

Вывод: отказ от встраивания фреймов youtube может ускорить загрузку страницы до 10 раз! Конечно, если там этих фреймов с десяток или более =)

Подпишитесь
на рассылку

Отправить
Заявка пока не отправлена

Также в блоге

новость Анонс Рейтинг Рунета 2021 - Встречай! Не останавливаемся на достигнутом! За год мы подготовили новые шикарные работы - м предлагаем их вниманию зрителей и жюри! 30 апреля 2021 статья Анонс Сказ об автоматизации Про то, как за 3 клика обновить все цены на строительном сайте 31 марта 2021 статья Анонс Хороший инструмент – залог успеха Инструменты - это то, что помогает нам в делах наших трудных 25 февраля 2021
Привет Бобры!

Меня зовут , у нас есть задача для Вас!

Мы готовы выслушать ваши предложения.

Нас интересует

Пришлите, пожалуйста, свои соображения и информацию о ценах
на мой e-mail: , или позвоните

Отправить сообщение
Сообщение пока не отправлено
Cоздание и
продвижение
сайтов
для
строительных
компаний
Выполненные
проекты
иконка иконка иконка
Как создать сайт
для строителей?
тссс... только никому!
Формула
идеального
строительного
сайта
Надежные партнеры
modx
bitrix
spaceweb
exposfera
ognemet
roistat
Какие задачи
решаем
- разработка
- продвижение
- поддержка
- модернизация
- 3D визуализация
- фото / видео
Наши клиенты во всех уголках
страны
Наши
новости
Победа на Рейтинге Рунета 2020
Первое место за нами! В категории строительства на Рейтинге Рунета 2020!.
Контакты
+7 (900) 015-57-77
info@bobers.ru
vkontakte facebook instagram twitter