Want to add an iframe border around your embedded video? A user recently asked us for a way to add a border around their videos in WordPress. Since you can use both iframe and oEmbed to add videos in WordPress, we'll show you how to add an iframe border around an embedded video, as well as how to add a border around embedded videos in WordPress.
If you don't like the video or need more instructions, continue reading.
The first thing you need to do is open a post or page that contains your iframe video embed code. A typical iframe embed code would look something like this:
You can add a border around it by adding an inline style to the code like this:
Just change the width of the border, as well as the color, and you're good to go.
While adding an iframe border works, there is actually a better way to add a border around videos in WordPress. That is by using oEmbed.
WordPress comes with built-in oEmbed support. Basically WordPress allows you to paste the video link and it will automatically fetch the embed code for them. Now this only works for oEmbed-enabled sites like 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 a range tag with inline style parameters, like this:
http://www.youtube.com/watch?v=qzOOy1tWBCg
If you want to add a same border around all video iframes, then it would be better to add a CSS class to your theme's style sheet.
.frame-border border: 3px solid #EEE;
Now you can use the CSS class in your iframe embed code like this:
You can also use the same CSS class in the break tag around your embed video URLs, like this:
http://www.youtube.com/watch?v=qzOOy1tWBCg
The advantage of using a single CSS class is that if you change themes later, you can easily change colors with a single click or go back and edit each video individually.
We hope this article helped you add an iframe border around an embedded video in WordPress. You may also want to check out these 9 useful YouTube tips to spice up your WordPress site with videos.
If you enjoyed this article, please subscribe to our WordPress YouTube Channel video tutorials. You can also find us on Twitter and Facebook.
