Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы

Первое решение, которое пришло в голову — оставлять на странице лишь скрины, снятые с ранее вставленных роликов (с кнопками видеоплеера и запуска, чтобы казалось, что это действительно ролик, а не просто картинка). Ну, а уже на эту ширму (скрин с кнопкой запуска) можно повесить ссылку, чтобы в новом окне открывалась страница, где и будет возможность просмотреть этот ролик (можно даже его автовоспроизведение там включить, чтобы пользователю еще раз мышкой не щелкать).

Проблему сей метод решал, но попутно создавал посетителям дополнительные трудности, что не есть хорошо. Да и пользователь, уходя смотреть ролик на другую страницу, по сути не улучшал, а ухудшал поведенческие характеристики данной страницы (хотя, это спорный вопрос). Но главное, что это не удобно (проверял и смотрел статистику).

Второе решение вытекало из первого. Надо сделать все то же самое (размещать на странице только скрин ролика), но показывать видео уже не на другой странице, а на этой же самой и еще лучше в том же самом месте, чтобы вызывать иллюзии типа «все как обычно». Сделать это можно, на мой взгляд, только с помощью Джава-скрипта, что и было реализовано.

Выглядеть это будет примерно так (изначально в исходном коде вы найдете только изображение chto-takoe-bitkoin.jpg, а воспроизведение ролика активируется с помощью onclick, т.е. при клике по этому изображению):

Но у данного метода есть несколько недостатков:

1. Возня со всем описанным ниже вместо того, чтобы просто скопировать предлагаемый на видеохостингах код
2. В браузерах пользователей должен быть разрешен Джава-скрипт. В противном случае видео они не посмотрят 🙁

Вставка видео на сайт с помощью джава-скрипта

Если все это вас не останавливает, а желание сделать страницы сайта чутка быстрее перевешивает нежелание немного повозиться с кодом, то вперед. Для каждого вставляемого на сайт видео придется вручную проделать следующие манипуляции:

1. Скопировать код вставки (с нужным размером видео) и разместить его на странице, типа этого:

   <iframewidth="710" height="399" src="https://www.youtube.com/embed/NHgSn6U9m5g" frameborder="0" allowfullscreen></iframe>

2. Снять скрин с ролика (использовать картинку, которую, например, плеер Ютуба подгружает себе по умолчанию, не получается, ибо на ней нет кнопки запуска — того самого треугольника посередине, который и позволяет отличить ролик от простого изображения). Получится примерно так (пока еще не кликабельно — просто картинка):
   
3. Далее я оптимизирую размер этого скрина и заливаю к себе на сервер (хостинг) по ФТП. На этом подготовительный этап закончен.
4. Из кода вставляемого видеоролика я беру идентификатор (в моем примере это NHgSn6U9m5g) и переношу его в такую вот конструкцию (в какое место и так несложно догадаться):

   <div class="img_center1" onclick="$(this).replaceWith('<iframewidth=\'100%\' height=\'400\' src=\'https://www.youtube.com/embed/NHgSn6U9m5g?autoplay=1&amp;rel=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"><img alt="" src="https://ktonanovenkogo.ru/wp-content/uploads/video/image/chto-takoe-bitkoin.jpg" /></div>

5. Туда же я добавляю путь до скрина, который сделал чуть ранее и залил на свой сервер (вставляю, естественно, в тег IMG). Класс img_center1 можете убрать, ибо это просто мой способ оформления картинок на сайте.

Доводим все до совершенства

Есть еще несколько нюансов. При клике по изображению (скрину) начинается подгрузка плеера и ролика стандартным образом. Но по умолчанию ролик обычно встает на паузу и пользователю придется еще раз кликать по нему для начала воспроизведения. Сие не есть хорошо.

А посему нужно настроить автовоспроизведение видео:

1. Для видео-ролика на Ютубе это сделать довольно легко — нужно просто добавить autoplay=1 в строчку с источников видео тега Iframe (можно сразу после знака вопроса стоящего за идентификатором видео, либо после амперсанда &, являющегося разделителем между параметрами данного видео).

Как видите, автовоспроизведение и для видеоролика с соцсетей замечательно работает.

Где-то так примерно...