Need a clean border around your embedded videos in WordPress? A reader recently asked us how to frame their video embeds effectively. At WPBeginner, we've helped thousands style their sites this way. Whether using iframe code or WordPress' oEmbed feature, here's our proven step-by-step guide.
Subscribe to WPBeginner for more tutorials. If you prefer reading or need details, keep going.
Edit the post or page with your iframe embed. A standard YouTube iframe looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Add an inline style for a border:
<iframe style="border: 3px solid #ccc;" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Adjust the border width, style, or color (e.g., #EEE for light gray) to match your design.
While inline styles work, oEmbed offers a smarter, more flexible approach for WordPress sites.
WordPress' built-in oEmbed auto-embeds URLs from YouTube, Vimeo, and more. (See: How to Easily Add Videos in WordPress Using oEmbed)
Wrap the URL in a div with inline styles:
<div style="border: 3px solid #ccc; padding: 5px;">https://www.youtube.com/watch?v=qzOOy1tWBCg</div>
For consistent borders site-wide, add this CSS to your theme's stylesheet:
.frame-border {
border: 3px solid #EEE;
}Apply the class to iframes:
<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Or oEmbed divs:
<div class="frame-border">https://www.youtube.com/watch?v=qzOOy1tWBCg</div>
This method shines for theme changes—update the CSS once, and all videos adapt instantly, no manual edits needed.
We hope this helps you polish your WordPress video embeds. For more, check our 9 useful YouTube tips to elevate your site.
Subscribe to our WordPress YouTube Channel. Follow us on Twitter and Facebook.