Как добавить рамку iframe вокруг встраивания видео

/

Вы хотите добавить рамку iframe вокруг встраиваемого видео? Недавно пользователь спросил нас, как добавить рамку вокруг своих видео в WordPress. Поскольку вы можете использовать как iframe, так и oEmbed для добавления видео в WordPress, мы покажем вам, как добавить границу iframe вокруг встраиваемого видео, а также как добавить границу вокруг видео oEmbed в WordPress.

IFRAME Граница вокруг видео WordPress

Добавление рамки вокруг видео iframe в WordPress

Первое, что вам нужно сделать, это открыть сообщение или страницу, содержащую код для встраивания вашего видео iframe. Типичный код внедрения iframe должен выглядеть примерно так:

Вы можете добавить рамку вокруг него, добавив встроенный стиль в код следующим образом:

Встроенное видео iframe с рамкой вокруг него

Просто измените ширину границы и цвет, и все готово.

Хотя добавление рамки iframe работает, на самом деле есть лучший способ добавить рамку вокруг видео в WordPress. Это с помощью oEmbed.

Добавление рамки вокруг встроенного видео в WordPress

WordPress поставляется со встроенной поддержкой oEmbed. В основном WordPress позволяет вставлять ссылку на видео, и он автоматически получает для них код встраивания. Теперь это работает только для сайтов с поддержкой oEmbed, таких как YouTube, Vimeo, DailyMotion, Hulu и т. Д. (См .: как легко добавлять видео в WordPress с помощью oEmbed)

Теперь, когда вы знаете, как добавить видео с помощью oEmbed, вот как вы можете добавить рамку вокруг видео oEmbed в WordPress.

При добавлении видео с помощью oEmbed просто оберните URL-адрес в тег span с параметрами встроенного стиля, например:

http://www.youtube.com/watch?v=29vQSUHdiu0

Если вы хотите добавить одну и ту же границу вокруг всех окон iframe для видео, лучше всего добавить класс CSS в таблицу стилей вашей темы.

.frame-border {
border:3px solid #EEE;   
}  

Теперь вы можете использовать класс CSS в коде внедрения iframe следующим образом:

Вы также можете использовать тот же класс CSS в теге span вокруг ваших URL-адресов видео oEmbed, например:

http://www.youtube.com/watch?v=29vQSUHdiu0

Преимущество использования одного класса CSS заключается в том, что если вы измените темы позже, вы можете легко изменить цвета одним щелчком мыши, а не возвращаться и редактировать каждое видео по отдельности.

Мы надеемся, что эта статья помогла вам добавить рамку iframe вокруг видео, встроенного в WordPress. Вы также можете увидеть эти 9 полезных советов YouTube, чтобы оживить свой сайт WordPress видео.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как установить, получить и удалить файлы cookie WordPress (как профессионал)

Вы хотите узнать, как использовать файлы cookie на своем сайте WordPress? Файлы cookie - это полезный инструмент для хранения временной информации в браузере

Как добавить LiveChat в свой магазин WooCommerce (и повысить продажи)

Вы хотите добавить LiveChat в свой магазин WooCommerce? Онлайн-чат помогает вам общаться с посетителями веб-сайта в режиме реального времени, чтобы вы могли

Как исправить проблему обновления и перенаправления страницы входа в WordPress

Мы часто получаем сообщения от наших пользователей о том, что их страница входа в WordPress постоянно обновляется и перенаправляется. Это блокирует

Как отключить автоматические обновления в WordPress

Знаете ли вы, что WordPress может автоматически обновлять ваш сайт? В некоторых случаях это могут быть плагины и темы. Несмотря на преимущества безопасности,