Adding Border Around iframe Videos in WordPress
First thing you need to do is to open a post or page containing your iframe video embed code. A typical iframe embed code should looks something like this:
[youtube https://www.youtube.com/watch?v=qzOOy1tWBCg&w=560&h=315]
You can add a border around it by adding inline style to the code like this:
[youtube https://www.youtube.com/watch?v=qzOOy1tWBCg&w=560&h=315]
Simply change the width of the border as well as the color, and you’re done.
While adding an iframe border works, there is actually a better way to add a border around videos in WordPress. That’s by using oEmbed.
Adding Border Around oEmbed Videos in WordPress
WordPress comes with built-in oEmbed support. Basically WordPress allows you to paste the link of the video, and it will automatically get the embed code for them. Now this only works for oEmbed enabled sites such as YouTube, Vimeo, DailyMotion, Hulu, etc. (See: how to easily add videos in WordPress using oEmbed)
Now that you know how to add a video with oEmbed, here is how you can add a border around oEmbed videos in WordPress.
When adding a video using oEmbed, simply wrap the URL in span tag with inline style parameters, like this:
<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
If you want to add a same border around all video iframes, then it would be best to add a CSS class to your theme’s stylesheet.
.frame-border {
border:3px solid #EEE;
}
Now you can use the CSS class in your iframe embed code like this:
[youtube https://www.youtube.com/watch?v=qzOOy1tWBCg&w=560&h=315]
You can also use the same CSS class in the span tag around your oEmbed video URLs, like this:
<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
The benefit of using a single CSS class is that if you change themes later, then you can easily change the colors with one click vs going back and editing each video individually.
We hope this tutorial helped you add an iframe border around a video embed in WordPress.