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

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

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

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

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

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

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

Использование шорткода видео 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

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


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

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

4 комментария

  1. День добрый! Спасибо большое за статью, оч.полезно. Плагины создают нагрузку, а у Вас всё просто! Есть только небольшой вопрос. Скриншоты у некоторых видео не отображаются, и размер их отличается от остальных, по ширине они такие, как я задаю в шорткоде, а вот по высоте больше. Как бы это исправить?

  2. а как сделать анимационные кнопки Play как у Вас? У меня просто картинка подгружается…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *