Как вставить видео с ютуба на сайт
Содержание:
- Как загрузить видео со сторонних ресурсов
- Встраивание проигрывателя на страницу
- Подход на чистом CSS
- Атрибуты OBJECT
- HTML Теги
- Как встроить видео с Youtube на сайт
- Простой способ встроить видео YouTube в WordPress
- Пример использования
- КАК Я ИСПОЛЬЗУЮ YOUTUBE-ВИДЕО В БЛОГЕ
- Атрибуты тега AUDIO
- Использование плеера в интерфейсах
- YouTube от EmbedPlus
- Атрибуты
- Что ещё можно сделать
- WP YouTube Lyte
- ЗАЧЕМ ВАМ НУЖНО ВСТАВИТЬ ВИДЕО С ЮТУБА НА САЙТ
- Как разместить видеоматериалы на сайте
Как загрузить видео со сторонних ресурсов
Добавляя видео, вы сделаете свой сайт более интересным для посетителей
Ниже вы найдёте краткие памятки, как «вытащить» ссылку на размещение видео с трёх самых популярных площадок – YouTube, Одноклассники и ВКонтакте.
YouTube
YouTube – всемирное хранилище видеороликов самых разных тем и жанров. Трейлеры к кинофильмам, музыкальные клипы, обзоры, уроки, летсплеи – на хостинге найдётся что угодно. Чтобы разместить видео с Ютуба на сайте, достаточно выполнить пару элементарных действий:
— найдите под плеером кнопку «Поделиться» и нажмите её;
— в появившемся окне выберите вариант «Встроить»;
— появится специальный код, который позволит вставить видео в HTML. Скопируйте его и вставьте при вёрстке нужной страницы.
Для известной российской соцсети действует тот же принцип. Чтобы получить код в стандартном плеере на Одноклассниках, необходимо:
— открыть видео;
— кликнуть по кнопке «Ссылка» в правом верхнем углу;
— в появившемся окошке перейти во вкладку «HTML-ссылка»;
— отрегулировать размер контейнера (сайт предложит несколько вариантов готовых пропорций, вы можете ввести значения вручную);
— включить/отключить опцию автопроигрывания ролика на сайте;
— скопировать окончательную ссылку и вставить в код страницы.
Понравился ролик во ВКонтакте? Эта соцсеть также позволяет разместить видео на сайте, html код будет сгенерирован в два счёта:
— найдите команду «Поделиться» и кликните по ней;
— в открывшемся окне перейдите во вкладку «Экспортировать»;
— установите размер контейнера с видео;
— скопируйте код и вставьте в вёрстку.
Несмотря на простоту, у этого способа есть существенный минус. Как только автор удалит исходный ролик из своего аккаунта, видео, которое вы разместили на вашей странице, перестанет отображаться. Решить проблему можно, залив файл с ПК.
Встраивание проигрывателя на страницу
Давайте рассмотрим следующий способ добавления видео с YouTube на страницы, но в этот раз мы будум добавлять видео не во фрейм, а на саму страницу. Для этого нам необходимо использовать HTML тег <object> или <embed>.
Хочу сразу обратить Ваше внимание, что этот способ считается устаревшим и отсутствует в официальной документации. Но если по какой-то причине вы не можете использовать фреймы, то этот способ подойдет для Вас
Элемент <object> — это универсальный способ внедрения в страницу мультимедийного контента — видео, flash-роликов, апплетов, изображений и даже веб-страниц. Он может содержать несколько элементов <param>, которые используются, чтобы определить параметры для плагинов, встроенных в элемент <object>.
Внутри элемента <object> также можно поместить резервный контент, который отображается, если не поддерживается мультимедийный файл. Атрибуты и параметры меняются в зависимости от типа объекта и иногда уникальны для сторонних плагинов, отображающих мультимедийный контент.
Элемент <embed> определяет контейнер для внешнего приложения, мультимедийного файла или интерактивного контента (плагин).
Предполагается, что содержимое элемента не может быть распознано браузером и требуют подключения внешних плагинов или специальных программ.
Он не входил в стандарт HTML 4, но поддерживался браузерами, официальный статус он обрёл лишь в спецификации HTML 5. Спецификация HTML 4.0 рекомендовала использовать тег <object> для загрузки внешних файлов, поэтому веб-мастера помещали тег <embed> внутрь тега элемент <object>, который применялся в качестве запасного варианта в элементе <object>, чтобы обеспечить поддержку более широкого круга браузеров и обеспечить валидность документа. В HTML 5 такой необходимоcти нет (элемент проходит валидацию).
Давайте рассмотрим пример их использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тегов <object> и <embed></title> </head> <body> <p>Размещение видео с YouTube</p> <!--внедряем в страницу видео с использованием парного тега <object>--> <object width = "320" height = "240" data = "https://www.youtube.com/embed/d9TpRfDdyU0"> </object> <!--внедряем в страницу видео с использованием тега <embed>--> <embed width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0"> </body> </html>
В этом примере мы разместили видео с видео хостинга YouTube с использованием тега и
Ширину и высоту видео задали с использовнием атрибутов width и height.
Обратите внимание, что тег парный и путь к видео необходимо указывать атрибутом data, a тег имеет синтаксис схожий с размещением обычного изображения (тег ) — использует атрибут src и не требует закрывающего тега
Результат нашего примера:
Рис. 54 Размещение видео на странице с использованием тегов <object> и <embed>.
Подход на чистом CSS
Создайте HTML5-видео:
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>
Важно: порядок видеофайлов имеет значение. В браузере Google Chrome есть ошибка, из-за которой он не может автоматически воспроизводить видео в формате .webm, если оно идет после чего-либо еще
Изображение постера будет заменено первым кадром видео после загрузки. Поэтому имеет смысл извлечь его из ролика.
Приведенный ниже код позволяет сделать видео полноэкранным:
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
Устаревшие версии браузеров не распознают видео форматы, но узнают тег <video>. Специально для этих браузеров мы создаем элемент background-image, используя ту же картинку-заполнитель.
На данном этапе только браузер Safari (мобильный и настольный) требует webkit-префикса поставщика для преобразований, поэтому он был включен в код.
Атрибуты OBJECT
data – указывает путь к файлу объекта;type – тип обекта (не является обязательным). Например:
type=»application/x-shockwave-flash» или type=»image/png» и т.д.;
width – ширина;height–высота
Также можно прописать текст между открывающими тегами <object> </object>. Написанный текст будет отображаться в том случае, если браузер не поддерживает элемент object.
Пример:
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8"> <title>Тег OBJECT</title> </head> <body> <object width="300" height="200" data="bloggood-ru.swf"> Ваш браузер не поддерживает тег object </object> </body> </html>
Результат данного примера в окне браузера, если он не поддерживает тег OBJECT:
Способ 3.
Вставить аудио на веб-страницу можно и тегом <AUDIO>:
<AUDIO SRC="sound.wav"></AUDIO>
HTML Теги
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Как встроить видео с Youtube на сайт
После того, как рассмотрены способы вставки и их преимущества и недостатки, самое время показать, как добавить видео на сайт с Ютуба.
Регистрироваться на Youtube вовсе не обязательно, если вы не планируете вести свой канал. Получить код видео на Ютубе для любого понравившегося видеоролика можно без регистрации.
Как получить html код видео с Youtube
На странице с роликом сразу под видеоплеером найдите кнопку «Поделиться»:
Откроется окно с выбором способа отправить ссылку. Для размещения на сайте нас интересует ссылка на видео Youtube в html, и чтобы ее получить нажимаем на кнопку с подписью «Встроить»:
После клика по этой кнопке будет показан код для вставки видео с Youtube, выглядит он вот так:
Дальше у вас два варианта. Первый — взять и разместить видео на сайте с Ютуба, как есть, ничего не меняя в стандартных настройках кода. Второй – внести правки в код и настроить под себя.
Сначала рассмотрим, какие стандартные настройки нам предлагаются видеохостингом:
- Выбрать начало воспроизведения. Ставим птичку в чекбоксе возле надписи «Начало» и вводим время, с которого начинать показ видео. Изменять начало времени воспроизведения стоит, если ролик длинный. Чтобы пользователи не скучали, просматривая ненужный контент, вы им экономите время и сразу предоставляете нужный материал.
- Можно отключить показ похожих видео по окончании просмотра.
- Не показывать панель управления проигрывателем. Это означает, что пользователь не увидит таких кнопок, как пауза/воспроизведение, полосу прокрутки.
- Также можно отключить показ названия ролика и панель действий.
- Последняя опция – повышенная конфиденциальность. Это влияет на сбор информации о пользователях, просматривающих ролик.
Раньше можно было указать желаемые размеры проигрывателя, указав, например, ширину, а высота подбиралась автоматически, сохраняя пропорции. Сейчас это опции нет в новых версиях браузера. Теперь это можно сделать, внеся правки в код.
Проделав приведенные выше настройки, вы можете скопировать html-код видео с Youtube, и разместить его в статье на своем сайте.
Если у вас старая версия браузера, чтобы получить html-код, под проигрывателем нажмите «Поделиться», выберите вкладку «HTML-код»:
Изменение настроек
Дополнительно стоит рассмотреть, какие правки можно внести руками в код для вставки видео на сайт.
Автоматическое воспроизведение видео с Youtube на сайте. Если у атрибута autoplay=1 значение 1, то будет происходить автоматический запуск видеоплейера после загрузки страницы. Для отключения установите 0. Для изменения размеров окна проигрывателя укажите нужные размеры у элементов width, height. Первый отвечает за ширину, а второй за высоту
Важно соблюдать пропорции
Как вставить код видео с Ютуба в html на платформе WordPress
Для того, чтобы вставить ссылку на видео в Ютубе, в редакторе Вордпресс переключаетесь на вкладку «Текст». Далее, выбираете после какого абзаца будет отображаться проигрыватель с роликом и добавляете туда полученный код:
По умолчанию проигрыватель будет выровнен по левому краю. Если хотите задать выравнивание по центру, заключите его код в тег <center></center>.
Чтобы посмотреть, как встроилось видео с Youtube на сайте, нажмите на кнопку «Посмотреть изменения» и откроется страница с предварительным просмотром оформленной записи.
Как вставить видео с Ютуба в ВК
Разместить видео с Ютуба в ВК намного проще, чем на сайте. Весь процесс публикации заключается в нескольких кликах. Нажмите на ссылку «Поделиться» под роликом, откроется следующее окно, где нужно выбрать социальную сеть ВКонтакте:
Если вы уже авторизованы в своему аккаунте в ВК,откроется страничка, где можно указать, как будет размещено видео (на стене или личным сообщением). Вы можете добавить свой комментарий. Если не хотите, чтобы было опубликовано изображение от видеоролика, снимите птичку возле чекбокса «добавить изображение». Также есть возможность добавить ролик в «Мои видеозаписи».
Простой способ встроить видео YouTube в WordPress
WordPress 2.9 добавил классную функцию, которую они называют встраиванием. Это позволяет вам копировать и вставлять видео YouTube прямо на ваш сайт без каких-либо дополнительных плагинов или необходимых настроек. Вот как это сделать:
Шаг 1
Скопируйте URL из видео YouTube. Вы можете скопировать URL-адрес из адресной строки вашего браузера или с помощью ссылки на ссылку YouTube.
Подсказка. Вы можете автоматически запустить видео с определенного места (например, через 30 секунд), предварительно установив флажок «Начать с» и выбрав время. Затем скопируйте ссылку.
Шаг 2
Вставьте URL в редактор WordPress, и функция встраивания автоматически превратит его во встроенное видео.
Вставить видео YouTube в редакторе WordPress
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <video></title> </head> <body> <h1>Видео в HTML5</h1> <video width = "320" height = "240" poster = "10.jpg" controls> <source src = "123.mp4" type = "video/mp4"> <source src = "123.ogg" type = "video/ogg"> <track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English"> <track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default> Ваш браузер не поддерживает видео тег. </video> </body> </html>
В этом примере мы:
Добавили на страницу видео (тег <video>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = «320» height = «240»), атрибут poster — указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).
Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source> атрибут type (MIME-типы для видео):
| Формат | MIME-типы |
|---|---|
| MP4 | video/mp4 |
| Ogg | video/ogg |
| WebM | video/webm |
Благодаря тегу <track> добавили субтитры к видео:
- Добавили путь к файлу атрибутом src.
- Установили тип дорожки — субтитры kind = «subtitles» (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
- Установили язык дорожки srclang = «ru».
- Отобразили названия двух дорожек label = «English», label = «Russian».
- Выбрали дорожку по умолчанию атрибутом default.
Результат нашего примера:
Ваш браузер не поддерживает видео тег.
Добавление видео с субтитрами на страницу (HTML тег <video>).
Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:
КАК Я ИСПОЛЬЗУЮ YOUTUBE-ВИДЕО В БЛОГЕ
Я сама веду свой блог, обучаясь в бесплатном тренинге, где мне уже пояснили, что записывать ролики – это очень хорошо и, помимо перечисленных выше плюсов, позволяет ещё и свой канал на ютубе развивать, что уже сейчас даёт мне дополнительный трафик на блог.
Правда, роликов у меня отснято ещё очень мало, ввиду небольшого опыта в этом деле, но я стараюсь. Сейчас я уже научилась многому, качество моих видео раз за разом растет.
То есть, говоря простыми словами, одним видеороликом я убиваю сразу двух зайцев: и ютуб-канал развиваю, и свой онлайн-дневник. Ах да, и конечно, реализую свой творческий потенциал! В общем, куда не посмотри – одни плюсы.
Атрибуты тега AUDIO
autoplay — аудио воспроизводится автоматически сразу после загрузки веб-страницы;
controls — панель управления к аудио плееру;
height — высота аудио плеера;
loop — повтор воспроизведение аудио сначала после его завершения;
src — путь к аудио файлу
Пример:
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8"> <title>ТЕГ AUDIO</title> </head> <body> <AUDIO SRC="bloggood-ru.mp3" controls="controls" autoplay="autoplay" loop="loop"></AUDIO> </body> </html>
Результат:
Вставить видеоролик на веб-страницу можно и тегом <VIDEO>:
<VIDEO SRC="kino.ogg"></VIDEO>
Использование плеера в интерфейсах
Кроме воспроизведения видео, плеер можно использовать и для добавления звуковых эффектов в интерфейсы:
- звук щелчка при нажатии на кнопку;
- звук перелистывания во время свайпа;
- звук комкания бумаги при удалении записи из базы данных и так далее.
Для этого нужно создать элемент <audio> без атрибута controls, задать ему id и запускать воспроизведение при каком-нибудь событии.
var buttonA = document.getElementsByid(‘button’);
var clickSound = document.getElementById(‘click-sound’);
function buttonClick() {
clickSound.currTime = 0;
clickSound.play();
}
buttonA.addEventListener(‘click’,buttonClick);
Так можно вызывать звук в любое время — главное, чтобы он был коротким, иначе могут быть проблемы, если пользователь быстро кликает по кнопкам. И еще продолжительные звуки сбивают с толку.
Кроме того, не рекомендуется добавлять такие фичи на сайт, если в этом нет особой необходимости. Потому что в некоторых случаях это может отвлекать пользователей, а в других — сильно замедлять загрузку страницы.
Также можно сделать удобный плеер для гифок:
<video src=’file.gif’ preload=’none’ id=’gif-player’ class=’gif-player gif-player_pause’ loop></video>
Немного стилей:
.gif-player {
cursor:pointer;
}
.gif-player_pause {
opacity:0.8;
}
И сам скрипт:
var gifPlayer = document.getElementById(‘gif-player’);
function gifAct() {
if(gifPlayer.paused) {
gifPlayer.play();
gifPlayer.setAttribute(‘class’,’gif-player gif-player_play’);
} else {
gifPlayer.pause();
gifPlayer.currentTime = 0;
gifPlayer.setAttribute(‘class’,’gif-player gif-player_pause’);
}
}
gifPlayer.addEventListener(‘click’,gifAct);
Такую гифку можно поставить на паузу, поэтому она не загружает страницу. Также пользователь может вообще не запускать и даже не загружать ее.
YouTube от EmbedPlus
Плагин YouTube по EmbedPlus предлагает несколько способов настройки видео , которые вы встраивать на своем сайте WordPress. Для начала, плагин имеет возможности галереи для перетаскивания ваших плейлистов или каналов на ваш сайт. Галереи отзывчивы и готовы к вашим настройкам. Затем ваши пользователи смогут просматривать и искать определенные видео в зависимости от своих потребностей.
Плагин YouTube для WordPress
Многие другие функции включены в плагин YouTube от EmbedPlus, но мы рассмотрим лучшие из них в списке ниже. Что касается цены, этот плагин является бесплатным для большинства основных функций. Например, вы можете включить некоторые бренды, чтобы избавиться от некоторых цветов и логотипов YouTube, а также включить прямую трансляцию YouTube на своем веб-сайте. Премиум версии начинается с $ 19,99 и обеспечивает пожизненный доступ к плагину YouTube.
Для некоторых планов предоставляется поддержка, и вы получаете некоторые интересные дополнения, такие как автоматическая разметка видео SEO и более быстрая загрузка страниц. Мне особенно нравится расширенная настройка галереи и проверка совместимости с мобильными устройствами, чтобы увидеть, как люди просматривают видео на своих небольших устройствах.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Указывает, что видео запустится автоматически, как только оно будет готово. |
| controls | controls | Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости). |
| height | pixels | Устанавливает высоту видео проигрывателя. |
| loop | loop | Зацикливает воспроизведение файла (наша песня хороша – начинай сначала). |
| muted | muted | Указывает, что видео будет заглушено (без звука). |
| poster | URL | Задает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения. |
| preload | autometadatanone | Указывает как видео должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay. |
| src | URL | Указывает URL адрес видео файла. |
| width | pixels | Устанавливает ширину видео проигрывателя. |
Что ещё можно сделать
Включить режим повышенной конфиденциальности
В этом режиме не используются cookie для отслеживания действий пользователя, то есть данные о просмотрах не сохраняются, а в рекомендации попадают ролики, похожие на текущий. Кроме того, воспроизводимые видео не попадают в историю просмотра на YouTube.
Режим повышенной конфиденциальности пока доступен только для встроенных проигрывателей на сайтах. Чтобы он поддерживался и в приложениях, разработчикам нужно упаковать проигрыватель в экземпляр WebView.
Обратите внимание, что действие Условий использования YouTube API и Правил для разработчиков распространяется и на встроенный проигрыватель. Примечания
Примечания
- Если пользователь перейдет со страницы, на которой встроен проигрыватель, на другой сайт или в другое приложение, данные о его действиях могут начать сохраняться. Это зависит от правил и условий использования сайта или приложения.
- Режим повышенной конфиденциальности пока доступен только для встроенных проигрывателей на сайтах. Чтобы он поддерживался и в приложениях, разработчикам нужно упаковать проигрыватель в экземпляр WebView.
Чтобы включить режим повышенной конфиденциальности, в коде HTML измените домен встроенного видео с https://www.youtube.com на https://www.youtube.com. Пример:
Оригинальный URL видео:
<iframe width=»1440″ height=»762″
src=»https://www.youtube.com/embed/7cjVj1ZyzyE»
frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe>
Измененный URL видео:
<iframe width=»1440″ height=»762″ src=»https://www.youtube.com/embed/7cjVj1ZyzyE»
frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe>
Поскольку это разные домены, администратору сети также необходимо добавить в белый список брандмауэра домен youtube.com.
Включить автоматическое воспроизведение
Чтобы видео воспроизводилось автоматически, вставьте в код фрагмент &autoplay=1. Он должен следовать за идентификатором ролика, который расположен после фрагмента embed/.
Автовоспроизведение не учитывается при подсчете просмотров видео.
Пример:
Настроить воспроизведение с определенного момента
Чтобы видео воспроизводилось с определенного момента, вставьте в код фрагмент ?start= и после него укажите нужное время в секундах от начала ролика.
Например, чтобы ролик начал воспроизводиться на отметке 1 минута 30 секунд, код должен выглядеть следующим образом:
Добавить субтитры
Чтобы во встроенном видео автоматически появлялись субтитры, добавьте в код фрагмент &cc_load_policy=1.
Можно указать язык субтитров. Вот пример для русского: &cc_lang_pref=ru&cc_load_policy=1.
- Язык субтитров задается параметром «cc_lang_pref».
- Фрагмент «cc_load_policy=1» означает, что субтитры будут включены по умолчанию.
- «ru» – код русского языка. Двузначные языковые коды приведены в стандарте ISO 639-1.
Запретить встраивание ролика
Можно запретить пользователям встраивать ваше видео. Вот как это сделать:
- Войдите в аккаунт и перейдите в Творческую студию YouTube.
- В меню слева нажмите Контент.
- Нажмите «Сведения» рядом с нужным видео.
- Откройте вкладку Другие параметры в верхней части страницы.
- В разделе «Дополнительные параметры» снимите флажок «Разрешить встраивание видео» и нажмите Сохранить.
WP YouTube Lyte
У плагина WP YouTube Lyte есть одна основная задача – загружать встроенные видео YouTube так, чтобы ваш сайт работал как можно быстрее. Ленивая загрузка обычно может быть сделана с изображениями, но этот плагин выводит его на новый уровень, сосредотачиваясь главным образом на видео YouTube. Ленивая загрузка загружает только те носители, которые в данный момент видны пользователю. Таким образом, ваш сервер не работает слишком сильно, чтобы загрузить все видео на вашей странице или веб-сайте.
В результате веб-сайт загружается быстрее, и вы должны увидеть улучшение производительности по всему сайту.
WP YouTube Lyte
Плагин WP YouTube Lyte полностью бесплатен, поэтому нет никаких подсказок, чтобы продавать вас или пытаться заставить вас покупать дополнения или премиум-версии.
Плагин не лениво загружает видео, как это делают большинство ленивых загрузчиков изображений. Плагин работает, встраивая небольшую версию видео (по сути, просто изображение миниатюры видео). Только когда пользователь нажимает на миниатюру, где он призывает к «более тяжелой» версии, которую предлагает YouTube. Это особенно важно, если вы планируете иметь большие галереи или несколько видео на одной странице. Ваши посетители не заметят никакой разницы между обычными вставками YouTube, поэтому видео по-прежнему загружаются так быстро, как вы ожидаете
- Плагин WP YouTube Lyte обеспечивает легкую вставку видео YouTube, пока посетитель не решит, что хочет его просмотреть. После щелчка воспроизводится полная версия видео YouTube.
- Это улучшает общую производительность вашего сайта, особенно когда у вас есть большая коллекция видео на одной странице.
- Поскольку плагин не требует никаких запросов к серверам YouTube, это фактически приводит к улучшению соответствия GDPR.
- Шорткоды доступны для быстрого размещения оптимизированных видео YouTube по всему сайту.
- Плагин был протестирован на всех мобильных устройствах, чтобы гарантировать, что медленная загрузка не повлияет на производительность мобильных устройств, которая поставляется с YouTube.
Тест скорости без WP YouTube Lyte
Хотите знать, насколько быстрее он может сделать ваш сайт? Мы провели пять тестов скорости с обычным встроенным видео YouTube и взяли среднее значение.
YouTube нет ленивой загрузки ( тест скорости )
Тест скорости с WP YouTube Lyte
Затем мы запустили пять тестов с включенным плагином WP YouTube Lyte, а также с его опцией миниатюрного кэширования. Этот маленький бесплатный плагин уменьшил общее время загрузки на 40,43%! Не говоря уже о том, что он также уменьшил размер страницы и все дополнительные внешние запросы, которые идут с встроенным плеером YouTube по умолчанию.
Тест скорости с включенной отложенной нагрузкой ( тест скорости )
Ленивая загрузка видео на YouTube может легко сократить время загрузки страницы более чем на 40%!
ЗАЧЕМ ВАМ НУЖНО ВСТАВИТЬ ВИДЕО С ЮТУБА НА САЙТ
Дело в том, что, когда видео размещено непосредственно в заметке на вашем сайте, любой читатель может прямо во время чтения материала посмотреть нужное видео без прямой отсылки на ютуб, что помогает сайту лучше продвигаться в поисковых системах.
В нескольких словах я сейчас расскажу, для чего просто необходимо вставить видео на сайт html с ютуба и, что это даст вашему сайту.
- Улучшается поведенческий фактор заметки, ведь читатели задерживаются на странице дольше, потому что, помимо чтения, могут ещё и видео посмотреть, им это удобнее: кто-то любит тексты читать и воспринимает лучше письменную информацию, кто-то предпочитает видосик посмотреть, а кто-то – и то и другое.
- Поисковики отдают статьям, в которых есть видео, больший приоритет, чем аналогичным схожего качества по тем же поисковым запросам, поскольку раз есть видеоролик, значит тема раскрыта ещё лучше.
Проще говоря, когда есть подходящее видео с youtube, то лучше вставить его на сайт, чем не делать этого. Чтобы позволить лучше продвигаться, желательно использовать именно ваш собственный уникальный ролик, а не чужой, поскольку этот фактор также учитывается поисковыми системами. Пример встроенного видео на моём блоге:
Как разместить видеоматериалы на сайте
Способов всего два:
- Загрузить файл на хорстинг, где размещен ваш сайт. Дальше подключить видео плеер и показывать медиаролик посетителям. Но у этого метода целых два недостатка. Во-первых, при большом числе одновременных просмотров, создается огромная нагрузка на сервер хостера. Это в свою очередь может привести к тому, что хостер наложит ограничения на сайт или даже временно отключит его, из-за превышения допустимой нагрузки. А во-вторых, видеоролики занимают много места на сервере, а оно тоже ограничено вашим тарифным планом.
- Трансляция видео, предварительно загруженного на Ютуб. Ссылка со специальным кодом позволит легко вставить на сайт видео с Youtube. И это не только позволит сэкономить ресурсы сервера, не создавая никакой нагрузки на него, но и позволит привлечь дополнительную аудиторию из популярного видеохостинга.
