Как добавить на сайт видео: например с YouTube канала

Недавно одному клиенту кроме всего прочего установил в текстовый html редактор кнопочку добавления видео с видеохостинга youtube. Реализация этакого чуда проста как ни что иное: всего-то добавляете предложенный ниже код в свой файл functions.php (или какой-то плагин) как тут же в редакторе появится удобная кнопка.

Чем она замечательна? 1 – после клика… всплывает такое окошко, в котором нужно указать ссылку на требуемый ролик; 2 – в двух следующих окнах указать высоту экрана видео и ширину (в px). Таким образом мы сможем регулировать размеры окна в соответствии с организацией текста той или иной статьи.

В общем-то, нынче не так уж и сложно добавить видео с канала Ютуб: редактор организует всё за нас, стоит только прописать ссылку на ролик… Но это “удобство”, как понимаете, никак не регулируется…

В общем, вам решать что и как добавлять к себе на сайт. Моё дело, предложить!

Занавес открывается:

 

 

 

 

 

добавляем видеоролик youtube на свой сайт

 

 

 

 

Будет вкратце моя повесть:

 

 

…после прописки нынешнего кода в html текстовый редактор, появится такая как на скрине ниже кнопка (можете назвать кнопку добавления видео как-то иначе, на своё вольное усмотрение).

 

 

 

 

 

 

После клика (предварительно скопировав требуемую ссылку с видеохостинга ютуб) прописываете её в это симпатичное окошко… (как это делается, подробнее расскажу ниже)

 

 

 

 

 

 

 

Далее в двух последующих, вводите высоту и ширину видео. Естественно, в px – однако прописывать только цифровые значения: без px !!

 

 

 

 

 

 

 

 

 

как поделиться видео с Ютуб: где находится или как отыскать ссылку на видео

 

 

 

 

Заходим на портал youtube и выбираем понравившееся кино.

 

Под самим видео, чуть ниже… в левой стороне отыщете кнопку “Поделиться”…

 

Кликайте по ней…

 

 

…выскочит такое представление: (отсюда нужно скопировать саму ссылку)

 

 

 

 

 

 

Копируете… однако – внимание !!

 

 

 

 

 

 

Чтобы работать с удобствами посредством предложенного ниже кода, нам потребуется от перекопированной с Ютуб канала ссылки только хвостик т.е возьмём только самый финал ссылки – rbo7am94res:

 

Вот так:

 

https://youtu.be/rbo7am94res

 

Только этот уникальный код: rbo7am94res – вот этот “хвостик” и нужно прописать в первое всплывающее окошко (самый первый скриншот).

 

 

 

 

 

код создания кнопки добавить видео youtube – для html редактора Вордпресс

 

 

 

 

 

Итак: вот сам код, который потребуется для реализации кнопки в html редакторе (код абсолютно настроен: как только пропишете к себе, тут же всё и активизируется…)…

 

 

 

/** КНОПКА ВИДЕО - можно задавать размеры экрана видео в модальном окне текстового редактора **/
add_action( 'admin_print_footer_scripts', 'ats_button_class' );
function ats_button_class() {
if ( wp_script_is('quicktags')) {
?><script>
QTags.addButton( 'ats_prompt', 'VIDEO-NASTROYCY', div_class);
function div_class() {
var new_class = prompt( 'Добавте финал ссылки видео', '' );
var newats_class = prompt( 'ширина видео на странице сайта', '' );
var newatss_class = prompt( 'высота видео на странице сайта', '' );
if ( new_class )
if ( newats_class )
if ( newatss_class )
{
QTags.insertContent('НАПОМИНАНИЕ ш-720 в-420<div class="teni-too"><iframe style="border:0" width="' + newats_class + '" height="' + newatss_class + '" src="https://www.youtube.com/embed/' + new_class + '?feature=oembed=0&amp;showinfo=0" allowfullscreen="allowfullscreen"></iframe></div>');
} }
</script>
<?php
} }
/** КНОПКА ВИДЕО - можно задавать размеры экрана видео в модальном окне **/

 

 

 

 

 

 

Итогом у нас в текстовом редакторе автоматически добавится такая ссылка: (естественно, опосля задания необходимых величин отображения ролика)

 

 

 

<div class="teni-too"><iframe style="border: 0;" src="https://www.youtube.com/embed/rbo7am94res?feature=oembed=0&amp;showinfo=0" width="auto" allowfullscreen="allowfullscreen"></iframe></div>

 

 

 

Как видите все наши указанные в окошках данные (и ссылка, и высота, и ширина видеоролика присутствуют в сформированной ссылке) – т.е  на своих местах:

 

 

 

 

 

 

.teni-too – селектор css возможно настроить по своему усмотрению… А возможно и исключить из кода вовсе.

 

 

Однако я советую не исключать селектор, а несколько его дополнить, скажем так, CSS стилистически, а именно сделаем так, чтобы видео, например, с YouTube, отображалось на сайте красиво – стало адаптивным в наше время мобильного интернета.

 

 

Короче, чтобы видеоролик отображался на всех расширениях мобильных экранов корректно – требуется выполнить следующие шаги:

 

 

 

как сделать адаптивное видео на сайте

 

 

 

 

Как было сказано выше, видео с каналов YouTube добавляется на сайт с помощью тегов <iframe>

 

Для управления адаптивностью видео мы добавили css селектор .teni-too

 

 

Теперь заставим видео автоматически подстраиваться подо все расширения экранов гаджетов.

 

 

…всё что нам требуется, для того, чтобы видео стало адаптивным, это добавить в файл стилей style.css активного шаблона, следующие примерные селекторы CSS:

 

 

 

.teni-too{
text-align:center; // блок видео по центоу: по желанию
overflow:hidden;   // по жнланию
position:relative;
padding-bottom:56.25%; /* настройте по своему усмотрению: например 75% */
height:0}

.teni-too iframe {
position:absolute;
top:0;
left:0;
width:100%;  // убрать, если растянуть только для мобил
height:100%; // убрать, если... для мобил
border-width:0;
outline-width:0}

 

 

 

 

растянем видео на 100% экрана только на мобильниках

 

 

 

 

Добавьте к стилям css это чудо медиа @media:

 

 

 

@media screen and (max-width:1560px) { /* 940px, 120px */
.teni-too iframe {
width: 100%;
height: 100%;
} }

 

 

 

6.088″/1560×720px – это среднее расширение смартфонов, к примеру Xiaomi… и пр. (1560px в режиме полной версии сайта)

 

 

Если добавите к css файлу медиасеоектор, то на десктопе видео будет отображаться по размерам заданным в коде фрейма (в данном случае 720х420px) и только 1560px растянется адаптивно – на весь экран.

 

 

 

Теперь все ваши видео на сайте будут адаптивными: т.е. отображаться корректно на всех расширениях экранов гаджетов!

 

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

А вот и кино: