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

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

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

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

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

Границу вокруг видео можно добавить путем добавления инлайновых стилей в код, вот так:

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

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

Способ добавления границ к iframe работает, но существует способ лучше — использовать oEmbed.

Добавляем границу вокруг oEmbed видео

В WordPress есть встроенная поддержка oEmbed. ВП позволяет вам просто вставить ссылку на видео, и код встраивания автоматически будет получен. Сейчас это срабатывает только для сайтов с поддержкой oEmbed, таких как YouTube, Vimeo, DailyMotion, Hulu и т.д.

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

При добавлении видео с использованием oEmbed, просто оберните ссылку в теги span с инлайновыми параметрами стилей, вот так:

http://www.youtube.com/watch?v=qzOOy1tWBCg

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

Теперь можно использовать этот CSS класс для iframe кода встраивания:

Также вы можете использовать этот же класс в теге span вокруг ваших ссылок для oEmbed видео, вот так:

http://www.youtube.com/watch?v=qzOOy1tWBCg

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Источник

Written by: