Ваш путь: Главная » Сниппеты, хаки, функции » текущая страница
заказать разработку или сопровождение вашего сайта/блога

написано: — 
отредактировано: 2020-03-28
издатель: в теме: Сниппеты, хаки, функции пост видели: 652
Запросто с WordPress — создание сайтов ATs media

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

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

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

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

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

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


 

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

 

 

 

 

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

 

 

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

 

 

 

видео youtube на сайт

 

 

 

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

 

 

 

добавляем видеоролик youtube

 

 

 

 

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

 

 

 

 

добавлять видео youtube

 

 

 

 

 

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

 

 

 

 

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

 

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

 

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

 

 

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

 

 

 

видео youtube на свой сайт

 

 

 

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

 

 

 

Даже если мы просто поместим перекопированную ссылку на страничку редактирования статьи (в визуальном редакторе), то у нас прекрасно всё заработает… …лихо отыграется 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="720" height="420" allowfullscreen="allowfullscreen"></iframe></div>

 

 

 

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

 

 

 

Вот статья с более простой реализацией на сайте ссылки на ролик канала Ютуб… Кстати, о работе YouTube Разберёмся зорким оком, почему же на хостинге YouTube запретили монетизацию многих опубликованных законопослушными пользователями видео в частности о монетизации…

…а это статья, в чёткой форме повествует о всевозможных принципах создания кнопок в текстовом редакторе WordPress — и далее по полезным ссылкам статьи.

 

 

 

.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 растянется адаптивно — на весь экран.

 

 

 

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

 

 

 


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

 

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 

 

А вот и кино:

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...




Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
Статьи по теме:


Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©

 необходимо принять правила конфиденциальности 

  1. Да, классно. Раньше немного парился с добавкой видео, хотя и появляются они в моём блоге не часто. Спасибо за простую реализацию с помощью кода. Респект!

    Ответить - Проверяющий