Как вставить видео в html с ютуба через блокнот?

Подключение видео на блог с помощью плагина

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

то что выделено красным это и есть идентификатор, копируем его…

Далее создаем новую запись в блоге, вставляем идентификатор туда где хотим его видеть и заключаем в специальные теги. Для ютуба они выглядят так:

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

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

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

Почему добавить видео не так просто?

Тот, кто не силён в HTML, обычно старается добавить видео двумя способами:

1) Frames и IFrames

Почтовик считает потенциально опасными объектами. За все системы рассылок не скажу, но в eSputnik у вас получится добавить iframes и даже просмотреть видео. Но при отправке видео заблокируется и можно будет его увидеть только в веб-версии, а оно вам надо?

2) Прикреплённые файлы

Утяжеляют письма и добавляют спам-очков, так как непонятно что за контент там находится. Возможно, вы найдёте систему, которая позволит так издеваться над письмами, но в eSputnik такой номер не пройдёт.

“Я всё равно добавлю видео!” — скажете вы и будете использовать HTML-код для вставки видео в email-рассылку.

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

• Apple;
• телефоны HTC с Android 5.0.1 (только в родном клиенте HTC)
• последняя версия Outlook.

Показывают статическое изображение:

• Предыдущие версии Outlook ниже 11 версии
• Gmail на Android ниже 4.0

Даже если вы с помощью HTML5 встроите 15 секундное видео, оно корректно отобразится только у пользователей Apple (в отдельных случаях на Outlook), хотя ничего толкового за столь короткое время и не покажешь. В gmail, например, видео автоматически преобразуется в gif и естественно не будет звука. Вы можете убедиться в этом, отправив себе письмо с LiveClicker

Задайте себе простой вопрос: “C какой целью вы отправляете видео?”

Важный нюанс по адаптации видеоплеера на мобильных

Есть один маленький, но важный нюанс. Каким бы способом выше я не встраивала видео в статью – на мобильном плеер не адаптируется и обложка видео обрезается.

Отображение на мобильном можно проверить с помощью сервиса

Какие есть решения?

1) Использовать специальный плагин для адаптации видео на мобильном. Плагин называется FitVids for WordPress. Мы находим его в официальном каталоге Вордпресс, устанавливаем и активируем.

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

Единственное, если после активации плагина и проверки адаптивности, у вас ничего не изменится, тогда включите вот этот пункт «My theme is missing jQuery. Add jQuery 3.4.1 from Google CDN» (перевод: «В моей теме отсутствует jQuery. Добавить jQuery 3.4.1 из Google CDN»). И снова перепроверьте адаптивность.

2) Добавить специальный фрагмент кода в таблицу стилей вашей Вордпресс темы и заключить код для встраивания видео в специальный DIV блок.

Вот этот код нам надо добавить в файл Вордпресс-темы :

Заходим в раздел «Внешний вид» – «Редактор тем» – открываем файл :

Фрагмент кода добавляем в самый конец, сделав пробел. И сохраняем, нажав «Обновить файл».

Теперь при встраивании видео с Ютуба его html-код надо заключить в блок DIV.

Вот эту часть:

Вставляем до начала кода видео.

А вот эту добавляем после:

</div>

Должно получиться вот так:

Важно: если один из способов у вас не работает, попробуйте второй.

Такими нехитрыми способами можно добавить видео в свои статьи на блоге Вордпресс. Рекомендую вам это делать, так как:

1) Наличие видео в статье улучшает поведенческие факторы – человек дольше времени проводит на сайте, просматривая видео. А это плюс для поискового продвижения.

2) Для удобства ваших читателей – ведь кому-то удобнее прочитать статью, а кто-то предпочтет посмотреть наглядную инструкцию в видео. Поэтому рекомендую делать контент в двух форматах – текст и видео.

Благодарю вас за внимание!

Виктория

Создание активной ссылки на ролик

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

Открывайте ролик на видеохостинге и через «Поделиться» копируйте ссылку на него.

Теперь нам нужно воспользоваться сервисом в Интернете и сократить полученную ссылку. Я перепробовала несколько сервисов, но во время публикации появляется ошибка. Поэтому выбрала сервис Зайдите на него и выполните регистрацию. Дальше жмите «Create» (1) и вверху справа появится поле для вставки исходной ссылки (2) – на скрине его нет. После этого жмите кнопку внизу «Create» (3) и будет создана нужная нам короткая ссылка. Скопируйте ее кнопкой «Copy» (4).

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

В результате, у вас появится активная ссылка, которая будет представлена картинкой и названием ролика. Картинку вы можете выбрать другую (2) и название можно изменить. В тексте заметки (1) можно что-то написать. Короткую ссылку или оставьте, или удалите, если она не нужна. Настраивайте внизу параметры заметки (3) и опубликовывайте ее (4).