How to Add an iframe Border Around a Video Embed

Do you need to add an iframe border round your video embed? Lately a consumer requested us for a means so as to add a border round their movies in WordPress. Since you should utilize each iframe and oEmbed so as to add movies in WordPress, we’ll present you easy methods to add an iframe border round a video embed in addition to easy methods to add a border round oEmbed movies in WordPress.

Including Border Round iframe Movies in WordPress

Very first thing you might want to do is to open a submit or web page containing your iframe video embed code. A typical iframe embed code ought to seems to be one thing like this:

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

You may add a border round it by including inline type to the code like this:

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

Merely change the width of the border in addition to the colour, and also you’re achieved.

Whereas including an iframe border works, there’s truly a greater means so as to add a border round movies in WordPress. That’s by utilizing oEmbed.

Including Border Round oEmbed Movies in WordPress

WordPress comes with built-in oEmbed assist. Principally WordPress permits you to paste the hyperlink of the video, and it’ll routinely get the embed code for them. Now this solely works for oEmbed enabled websites similar to YouTube, Vimeo, DailyMotion, Hulu, and many others. (See: easy methods to simply add movies in WordPress utilizing oEmbed)

Now that you understand how so as to add a video with oEmbed, right here is how one can add a border round oEmbed movies in WordPress.

When including a video utilizing oEmbed, merely wrap the URL in span tag with inline type parameters, like this:

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

If you wish to add a identical border round all video iframes, then it might be finest so as to add a CSS class to your theme’s stylesheet.

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

Now you should utilize the CSS class in your iframe embed code like this:

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

You may also use the identical CSS class within the span tag round your oEmbed video URLs, like this:

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

The good thing about utilizing a single CSS class is that for those who change themes later, then you may simply change the colours with one click on vs going again and enhancing every video individually.

You May Also Like : How to Easily Create Short Amazon Affiliate Links in WordPress

We hope this text helped you add an iframe border round a video embed in WordPress. You might also need to see these 9 helpful YouTube ideas to boost your WordPress website with movies.

If you liked this article, make sure to hit the bell for getting our latest updates and share this article with your friends in every social media platforms.

1 thought on “How to Add an iframe Border Around a Video Embed”

  1. Pingback: How to Cloak Affiliate Links on Your WordPress Site

Leave a Comment

Your email address will not be published. Required fields are marked *