Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Add an iframe Border Around a Video Embed

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add an iframe border around your video embed? Recently a user 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 will show you how to add an iframe border around a video embed as well as how to add a border around oEmbed videos in WordPress.

IFRAME Border around WordPress Videos

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

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:

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

You can add a border around it by adding inline style to the code like this:

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

An iframe video embed with border around it

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;"></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:

<iframe class="frame-border" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

You can also use the same CSS class in the span tag around your oEmbed video URLs, like this:

<span class="frame-border"></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 article helped you add an iframe border around a video embed in WordPress. You may also want to see these 9 useful YouTube tips to spice up your WordPress site with videos.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Nicola says

    There seems to be extra space at the bottom so it doesn’t fit exactly, how can I fix this please.

    • WPBeginner Support says

      If you’ve set the width and height you would likely need to change the height based on the dimensions of your video.


    • eric greenspan says

      Change the hex number Tom. For Dodger blue use: #1E90FF in place of #EEE. You can find hex colors here.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.