Видео Youtube в всплывающем окне. Шорткод для WordPress

В статье Видео Youtube во всплывающем окне представлен код, с помощью которого можно на сайте установить всплывающее окно, в котором будет проигрываться видео с youtube.
Такое видео выглядит так:

Но если у Вас сайт на WordPress, то гораздо удобнее сделать шорткод для такого решения. Именно такой шорткод я и сделала и активно пользуюсь им на сайте. Теперь достаточно написать на странице сайта на WordPress:

и на сайте появится такое окно.

Установка шорткода видео Youtube в всплывающем окне для WordPress

Для того, чтобы пользоваться таким окном на сайте достаточно всего лишь внести изменения в два файла.
Консоль – Внешний вид – Редактор

• functions.php
  В конец этого файла до закрывающего ?> добавьте этот код:

  function myyoutube_shortcode_function($atts, $content=' ') {
       extract(shortcode_atts(array(
       "autoplay" => '0',
       "width" => '700',
       ), $atts));
  return '<div id="youtubepopup" style="width:'.$width.'px;"><a  (0)" onClick="javascript:window.open(\'http://www.youtube.com/embed/'.$content.'?autoplay='.$autoplay.'\', \'Youtube video\', \'width=990,height=567,scrollbars=NO,left=150,top=50\');"><span></span><img src="http://i1.ytimg.com/vi/'.$content.'/maxresdefault.jpg" style="width:'.$width.'px;" alt="" /></a></div><div style="clear:both"></div>';
     }
     
     add_shortcode('myyoutube', 'myyoutube_shortcode_function');

• style.css
  В конец этого файла добавьте стили CSS:

  /* Видео youtube в всплывающем окне */ 
   #youtubepopup {width: 320px; height: 180px; } 
   #youtubepopup a {position:relative; float: left; margin:5px;} 
   #youtubepopup a span { display:block; background-image:url(https://stepfor.top/myimg/icons/button-youtube-red.png); background-repeat:no-repeat; width:86px; height:60px; position:absolute; left:50%; top:50%; margin-top: -30px; margin-left:-43px; } 
   #youtubepopup img { border: solid 1px #999; padding:5px; }
   #youtubepopup a:hover span {background-image:url(https://stepfor.top/myimg/icons/button-youtube-black.png);}
  /* END-Видео youtube в всплывающем окне */ 

Использование шорткода видео Youtube в всплывающем окне для WordPress

Теперь для появления видео на сайте достаточно на странице разместить код:

где ID_youtube_video – идентификационный номер youtube видео.

Каждое видео на Youtube имеет свою личную ссылку следующего вида:
http://www.youtube.com/watch?v=Bd4YzrqWsY0

где после знака равно, для видео присваивается личный идентификационный номер, состоящий из сочетания 11 букв и цифр. Это и есть ID_youtube_video.

Параметры шорткода

Этот шорткод можно редактировать с помощью двух параметров:

• autoplay – как воспроизводить видео при открытии автоматически или нет. По умолчание видео воспроизводится НЕ автоматически. Но если добавить в шорткод параметр autoplay=1 видео будет проигрываться автоматически при открытии.
• width – ширина картинки видео на сайте. По умолчанию ширина картинки 700 пикселей. Введите любую другую цифру, которая будет шириной картинки видео в пикселях. Например:

  Пример 1
  
  
  Пример 2
  
  
  Пример 3
  

  Пример 1

  Пример 2

  Пример 3

Вот и все. Очень надеюсь, что этот шорткод будет вам полезен.