В этой статье описаны некоторые фишки как вставить видео с youtube на сайт. Вроде бы вставить видео с youtube на сайт wordpress не так уж и сложно, однако есть различные варианты. как вставить видео с youtube на сайт wordpress

Варианты вставок видео YouTube вставлять являются отличным способом получить более профессиональный вид встроенных видео. Хитрость заключается в том, чтобы понять, какие коды использовать и как вставить их в код для вставки YouTube.

Кажется, что это не так просто. но на самом деле это не так.

Воспринимайте эту статью как краткое руководство.

Как вставить видео с youtube на сайт wordpress

Как найти основной код

Если у вас есть видео, размещенного на YouTube, которое вы хотите встроить на свой сайт, вы просто должны нажать “share” и “embed”, чтобы получить основной код (см стрелку на картинке).

как вставить видео с youtube на сайт
Это пишут на многих сайтах. Лично я не нашла такую страницу.

Зато нашла такую, находится под видео при просмотре в вашем аккаунте.как вставить видео с ютуба на сайтИли просто использую этот код.

<iframe width="640" height="480" src="http://www.youtube.com/embed/pOgPeLjRWGs" frameborder="0" allowfullscreen></iframe>

Или самый простой вариант написать ссылку на видео и все.

https://youtu.be/pOgPeLjRWGs

Обратите внимание – размеры плеера разные.

Где взять адрес ссылки? 

Я уже писала как создать свой канал, в менеджере видео в основной информации можно найти ссылку.

как вставить видео с ютуба на сайт

Как настроить встроенное видео

Ключом к настройке является ввод дополнительного кода.

YouTube дает нам всем краткое изложение всех вариантов на их сайте разработчика .

Я хочу обсудить несколько популярных из них.

Функция “autoplay” позволяет немедленно начать видео при загрузке страницы. (Значение “1” означает это). Чтобы вставить это в код, вы бы просто использовать символ “?”, А затем “autoplay = 1”

<iframe width="640" height="390" src="http://www.youtube.com/embed/pOgPeLjRWGs?autoplay=1" frameborder="0" allowfullscreen></iframe>

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

Функция “controls” позволяет скрыть или показать элементы управления видео. Чтобы скрыть элементы управления, вставить символ “&”, а затем “controls = 0” сразу после кода.

<iframe width="640" height="390" src="http://www.youtube.com/embed/pOgPeLjRWGs?autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

В “showinfo” код скрывает строку заголовка YouTube. Чтобы скрыть информационную панель, надо вставить символ “&” и “showinfo = 0”

<iframe width="640" height="390" src="http://www.youtube.com/embed/pOgPeLjRWGs?autoplay=0&amp;controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Для того, чтобы удалить похожие видео в конце видео вставить “&”, то “rel=0″, вот так:

<iframe width="640" height="390" src="http://www.youtube.com/embed/pOgPeLjRWGs?autoplay=0&amp;controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>

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

Для справки, вы можете найти окончательный список параметров, который можно использовать для встраиваемых YouTube видео:  https://developers.google.com/youtube/player_parameters?csw=1. 

Вот изначальный код видео с ютуба.

<iframe width="640" height="390" src="http://www.youtube.com/embed/lx1151ihFYM" frameborder="0" allowfullscreen></iframe>


Autohide
Это “автоматическое скрытие.” Автоскрытие имеет три значения, “2” – вначале находится картинка по умолчанию и видео исчезает в то время как пользователь управляет видимостью, “1” – скрывает индикатор и управление плеером через несколько секунд и “0” – контроль и пользователь виден всегда. Не совсем поняла кому это нужно, да и разницы особой не увидела, если поставить например значение 1. Но можете попробовать, вдруг все-таки есть какой то смысл.

<iframe width="640" height="390" src="http://www.youtube.com/embed/lx1151ihFYM?autohide=1" frameborder="0" allowfullscreen></iframe>

cc_load_policy

Это позволяет вывести титры, даже если у пользователя титры по умолчанию отключены. Значение “0” означает удаление подписи, а значение “1” выводит подписи.

<iframe width="640" height="390" src="http://www.youtube.com/embed/pOgPeLjRWGs?cc_load_policy = 1" frameborder="0" allowfullscreen></iframe>

color

Параметр color диктует цвет, индикатор показывает на видео. Есть два параметра, чтобы выбрать : “красный” и “белый”. Красный по умолчанию, вот пример параметра «белый»:

<iframe width="640" height="390" src="http://www.youtube.com/embed/lx1151ihFYM?color=white" frameborder="0" allowfullscreen></iframe>

disablekb

Параметр disablekb отключает управление видео от клавиатуры. Значение этого параметра равно “0” по умолчанию, но может быть изменено на “1”, чтобы отключить управление видео от клавиатуры.

<iframe width="640" height="390" src="http://www.youtube.com/embed/lx1151ihFYM?disablekb=1" frameborder="0" allowfullscreen></iframe>


Кстати, управлением клавиатуры YouTube являются:

Spacebar:  воспроизведение / пауза
Arrow Left: перейти обратно на 10% в текущем видео
Arrow Right:   перейти вперед на 10% в текущем видео
Arrow Up:   подъем вверх
Arrow Down:   вниз

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

enablejsapi

Enablejsapi позволяет включить Javascript API для управления плеером YouTube. Если вам нужен этот параметр (который “1” для включения и “0” по умолчанию, кстати), то можно прямо сейчас прекратить чтение этого поста, но, наверное, не нужно это нам сейчас. Продолжим.

end

Параметр “end” позволяет определить продолжительность (в секундах), пока ваше видео будет играть, а затем остановится. Обратите внимание, что время от начала видео, а не от параметра “start”, что обсуждается в данный момент. И еще, YouTube говорит, что это не работает для HTML5.

<iframe width="640" height="390" src="http://www.youtube.com/embed/lx1151ihFYM?end=2" frameborder="0" allowfullscreen></iframe>

 

Продолжение можно будет прочитать в следующей статье.

Статьи по теме:

НадеждаWordPressДля ютубютуб
В этой статье описаны некоторые фишки как вставить видео с youtube на сайт. Вроде бы вставить видео с youtube на сайт wordpress не так уж и сложно, однако есть различные варианты.  Варианты вставок видео YouTube вставлять являются отличным способом получить более профессиональный вид встроенных видео. Хитрость заключается в том, чтобы...

Возможно Вас также заинтересует:

Арифметическая капча. Где скачать капчу и как установить
Здравствуйте, уважаемый читатель моего блога. Сегодня установила новую, я сказала бы оригинальную капчу, которую Вы можете увидеть и которой можете воспользоваться, если захочется отзыв ...
Как сделать Фавикон для сайта
Фавиконом называется это красивый значок, который  Все видят возле названия сайта в браузере.  Фавикон позволяет выделиться сайту, как в закладках браузера, так и в ...
Пример 404 страницы
Здравствуйте, уважаемый читатель моего блога. Эта статья абсолютно ни о чем, просто, наконец то руки дошли до страницы 404.  
Все для безопасности сайта. Требуется срочное обновление WordPress.
Версия WordPress 4.2.2 доступна с 7 мая 2015 года. На официальном сайте написано: "Это важное обновление безопасности для всех предыдущих версий, и мы настоятельно рекомендуем вам ...
20 плагинов для формы авторизации и регистрации на сайте WordPress
Если Вам нужна форма авторизации и регистрации на сайте на WordPress, то это можно сделать с помощью плагинов и их достаточно много. Причин для использования для установки ...
Как вставить html код в статью или страницу
Иногда нужно вставить какую нибудь информацию в статью типа баннер или какой нибудь формы. Эти вещи представляют из себя html код. Чтобы вставить html код ...
Как сделать якорь на странице
 Якорные ссылки - это ссылки, которые выведут Вас на определенную часть страницы. Эти ссылки практически позволяют читателям "прыгать" в различных частях страницы. Может ли человек, незнающий html, сделать якорь? 
Виджет от revolvermaps com
Хочу рассказать о виджете от revolvermaps com. Мне он показался прикольным.