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

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

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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

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

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

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

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

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

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

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

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

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

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

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

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

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

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

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

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

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

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

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