В статье Видео Youtube во всплывающем окне представлен код, с помощью которого можно на сайте установить всплывающее окно, в котором будет проигрываться видео с youtube.
Такое видео выглядит так:
Но если у Вас сайт на WordPress, то гораздо удобнее сделать шорткод для такого решения. Именно такой шорткод я и сделала и активно пользуюсь им на сайте. Теперь достаточно написать на странице сайта на WordPress:
1 |
[myyoutube]ID_youtube_video[/myyoutube] |
и на сайте появится такое окно.
Установка шорткода видео Youtube в всплывающем окне для WordPress
Для того, чтобы пользоваться таким окном на сайте достаточно всего лишь внести изменения в два файла.
Консоль — Внешний вид — Редактор
- functions.php
В конец этого файла до закрывающего ?> добавьте этот код:
123456789function myyoutube_shortcode_function($atts, $content=' ') {extract(shortcode_atts(array("autoplay" => '0',"width" => '700',), $atts));return '<div id="youtubepopup" style="width:'.$width.'px;"><a href="javascript:void(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:1234567/* Видео 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
Теперь для появления видео на сайте достаточно на странице разместить код:
1 |
[myyoutube]ID_youtube_video[/myyoutube] |
где ID_youtube_video — идентификационный номер youtube видео.
Каждое видео на Youtube имеет свою личную ссылку следующего вида:
http://www.youtube.com/watch?v=Bd4YzrqWsY0
где после знака равно, для видео присваивается личный идентификационный номер, состоящий из сочетания 11 букв и цифр. Это и есть ID_youtube_video.
Параметры шорткода
Этот шорткод можно редактировать с помощью двух параметров:
- autoplay — как воспроизводить видео при открытии автоматически или нет. По умолчание видео воспроизводится НЕ автоматически. Но если добавить в шорткод параметр autoplay=1 видео будет проигрываться автоматически при открытии.
- width — ширина картинки видео на сайте. По умолчанию ширина картинки 700 пикселей. Введите любую другую цифру, которая будет шириной картинки видео в пикселях. Например:
12345678Пример 1[myyoutube width=320]ID_youtube_video[/myyoutube]Пример 2[myyoutube width=500 autoplay=1]ID_youtube_video[/myyoutube]Пример 3[myyoutube]ID_youtube_video[/myyoutube]
Пример 1
Пример 2
Пример 3
Вот и все. Очень надеюсь, что этот шорткод будет вам полезен.
День добрый! Спасибо большое за статью, оч.полезно. Плагины создают нагрузку, а у Вас всё просто! Есть только небольшой вопрос. Скриншоты у некоторых видео не отображаются, и размер их отличается от остальных, по ширине они такие, как я задаю в шорткоде, а вот по высоте больше. Как бы это исправить?
Ирина, мне бы увидеть на примере. Сбросьте ссылку. Так тяжело гадать.
а как сделать анимационные кнопки Play как у Вас? У меня просто картинка подгружается…
Всё, нашел)