Что такое встраивание видео на Ютубе

Поисковая выдача становится все разнообразнее. Лаконичных ссылок с заголовком и описанием уже недостаточно. Внимание пользователя перетягивают яркие и цепляющие элементы: быстрые ответы, картинки, «богатые» сниппеты, ссылки на похожие запросы, расширенные ответы справа от выдачи, колдунщики поисковиков и, конечно, видео.

Привлекательная ссылка на видеоролик в выдаче — источник дополнительного трафика, а значит и конверсий для бизнеса.

Так выглядит сниппет с превью видео в выдаче Яндекса

Оптимизация видео из YouTube и Vimeo

В связи с популярность видео-роликов в интернете, многие сервисы (например, YouTube и Vimeo) дают пользователям возможность размещать видео на своих сайтах. Это очень удобно, но существует одна серьезная проблема: такое размещение часто становится причиной, увеличивающей время загрузки страницы.

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

Youtube встраивание видео Разрешать или Запрещать встраивать свой ролик ?

Встраиваем видео из YouTube на сайт

Процесс размещения видео из YouTube на странице сайта очень прост: нужно просто открыть видео на YouTube и нажать «Поделиться».

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

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

Проблема в том, что внедрение видео с помощью этого кода приводит к тому, что браузер скачивает более 500 КБ файлов Javascript при обращении к странице. И это произойдет даже если пользователь не будет взаимодействовать с проигрывателем видео, встроенным на страницу.

Встраивание нескольких видео

Ситуация, когда на странице расположено более, чем одно видео уже не редкость. Например, отзывы о компании в формате видео или различные видео-инструкции по настройке на странице помощи.

YouTube осуществляет 8 запросов при загрузке нескольких файлов для каждого видео в iframe, поэтому страницы с несколькими встроенными видео загружаются не так быстро из-за этих http-запросов и соответствующих загрузок.

Статический «баннер» на месте видео с YouTube

Решение этой проблемы следующее: получаем статический «баннер» с YouTube и отображаем уже его вместо встроенного видео. При нажатии пользователем кнопки проигрывания видео начинается его показ.

Делается это с помощью следующего Javascript-кода:

function youTubes_makeDynamic() var $ytIframes = $(‘iframe[src*=»youtube.com»]’);
$ytIframes.each(function (i,e) var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr(‘src’).split(///); tmp = tmp[tmp.length — 1]; tmp = tmp.split(‘?’); ytKey = tmp[0];
var $ytLoader = $(‘ $ytLoader.append($(‘’));
$ytLoader.append($(‘’));
$ytLoader.data(‘$ytFrame’,$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () var $ytFrame = $ytLoader.data(‘$ytFrame’);
$ytFrame.attr(‘src’,$ytFrame.attr(‘src’)+’?autoplay=1′);
$ytLoader.replaceWith($ytFrame);
>);
>);
>;
$(document).ready(function () );

Благодаря такому решению время загрузки страницы значительно уменьшается: с 17,38 секунд до 3,6 секунд.

Альтернативное внедрение видео YouTube

Габариты YouTube-видео на странице внедрены в код, что делает проигрыватель неадаптивным, а стандартный код внедрения видео увеличивает время загрузки страницы, в том числе и за счет скачивания дополнительных файлов и множественных запросов.

Однако внедрить видео на страницу можно и другим способом, используя не iframe, а тэг div. При этом размер не указывается, а размещение iframe на странице предусматривается только при клике пользователя на кнопку просмотра видео.

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

После вставляем в шаблон страницы код, который находит все внедренные тэги, заменяя их на миниатюры видео.

Браузеры Safari и Chrome на устройствах iOS и Android блокируют автоматический запуск внедренного видео в целях предотвращения скачивания больших объемов информации по мобильному Интернету. Поэтому данные браузеры проигрывают HTML5 видео только по запросу пользователя.

Готовые решения для CMS

Описанный вариант решения проблемы подходит, если владелец сайта достаточно знает Javascript, чтобы использовать это решение.

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

Рассмотрим 4 плагина для WordPress, позволяющие загружать видео из YouTube по принципу lazy-load, а именно, не блокируя отображение других составляющих страницы.

Плагин Lazy Load for Videos

Встраивание видео с Youtube в презентацию — скачивание ролика, как вставить в файл

Интересное в youtube

Автор Евгения А. На чтение 4 мин Просмотров 824

Для тех, кто интересуется, как вставить видео из «Ютуба» в презентацию, я опишу порядок действий в разных приложениях и сервисах. Эта возможность пригодится в образовании или при демонстрации созданного вами продукта.

Как работает вставка видео из «Ютуба» в презентацию

Если в PowerPoint вставляется заранее скачанный ролик, он становится частью презентации. Благодаря этому видео воспроизводится на другом ПК. Кроме того, с помощью особой надстройки на слайд может добавляться страница, содержащая плеер YouTube.

Способы добавить видео с YouTube в презентацию

В офисных приложениях клип с «Ютуба» можно добавить заранее скачанный файл или внедрить плеер.

Выбор формата зависит от того, разрешил ли владелец встраивание и имеются ли возрастные ограничения на просмотр вне видеохостинга.

С жесткого диска

Перед тем как вставить видео из «Ютуба» в презентацию, его надо загрузить, чтобы оно хранилось на диске. Выбор размера зависит от потребностей пользователя. Если для получателя имеет значение высокое качество, нужно разрешение 720 или 1080.

Если надо сократить размер файла видеопрезентации (например, перед отправкой через мессенджер), подойдет ролик в формате 360p.

1. Запустить PowerPoint и нажать на вкладку, отвечающую за вставку объектов.
2. Кликнуть по клавише видеоконтента и в меню выбрать вариант пункт «С компьютера».
3. В диалоговом окне найти папку, в которой хранится ролик. Добавление клипа займет несколько секунд.
4. Когда плеер появится на слайде, выровнять объект, если это необходимо.

В PowerPoint

В пакете Microsoft Office 2013 г. появилась тесная интеграция с YouTube. Благодаря этому можно добавлять видеоролики с данного хостинга в упрощенном режиме.

Чтобы сделать это, потребуется:

1. Нажать на кнопку добавления во второй вкладке главного окна PowerPoint.
2. Выбрать режим вставки из интернета.
3. Ввести поисковый запрос в появившуюся строку.
4. Щелкнуть левой клавишей по подходящему клипу из списка.

Также читайте: Выбор микрофона для Youtube — требования к оборудованию и качественные модели

Кроме того, можно внедрить видеозапись с помощью кода.

Чтобы получить его, потребуется:

1. На странице просмотра нажать кнопку отправки.
2. Во всплывающем окне выбрать режим встраивания.
3. Настроить дополнительные параметры.
4. Скопировать код и вставить в соответствующую строку в PowerPoint.

В Canva