Hi there! Adding a customized border around your embedded videos can really make them pop on your WordPress site. But how exactly do you go about adding a stylish border to YouTube, Vimeo, or other oEmbed videos?
In this post, I‘ll walk you through step-by-step how to add a border around video embeds in WordPress. I‘ve been working with WordPress for over 15 years, so I‘ll also share some pro tips and tricks I‘ve learned along the way to help you upgrade your site‘s video presentation.
Contents
Adding Borders to iframe Embeds
The easiest way to embed a video in WordPress is using an iframe code. Let‘s look at how to add a border around iframe video embeds:
Using Inline iframe Styles
You can add a border with inline CSS styles directly on the iframe code. Here‘s an example:
<iframe style="border: 5px solid #1E90FF;" width="640" height="360" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>This adds a 5px blue border around the iframe.
You can customize the border width, style, color and more to match your site. I‘d recommend a 3-5px border at minimum for visibility.
Pro Tip: Pay attention to the border color and make sure it contrasts well with your background. A light border can get lost on a white page.
Using a CSS Class
For better consistency, define a CSS class with your border styles in your theme‘s style.css file:
.video-border {
border: 5px solid #1E90FF;
}Then add this class to your iframe markup:
<iframe class="video-border" width="640" height="360" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe> This keeps your HTML clean and allows you to update the border style in one place.
Pro Tip: If you want to get fancy, you can add box shadows, rounded corners, hover effects, and other styles to your video border CSS class.
The Benefits of Using a CSS Class
Defining iframe borders with a CSS class has a few advantages:
- Consistent styling – All video borders will have the same look and feel across your site
- Easy to change – Just update the CSS class to change all video borders site-wide
- Improved performance – Less HTML code means faster page loading vs inline styles
- Reusable – The class can be used on multiple videos across different pages
So using a CSS class is generally the cleanest way to add iframe borders.
Adding Borders to oEmbed Videos
For oEmbed videos from YouTube, Vimeo, etc. you can add a border around the video URL:
<span class="video-border">https://www.youtube.com/watch?v=VIDEO_ID</span>When WordPress inserts the embed code, it will have the border CSS applied.
This makes it easy to consistently style oEmbed video borders without editing the generated embed code.
Pro Tip: You can install a plugin like oEmbed Border to automatically add borders around oEmbeds across your site.
Ideas for Styling Your Video Borders
When it comes to styling your video borders, here are some ideas you can try:
- Match your brand colors
- Make the border the same color as your text links for visual consistency
- A subtle gray border blends in well with most backgrounds
- Try a high contrast color like yellow to grab attention
- Add box shadows for a floating effect
- Experiment with rounded corners and border width
In my experience, a solid 3-5px border tends to look best in most cases. Make sure the color fits your overall site design.
Here are some specific video border styles I would recommend:
/* Subtle gray box border */
.video-border {
border: 4px solid #BBB;
}
/* Bold blue border */
.video-border-blue {
border: 5px solid #1E90FF;
}
/* Rounded corner border */
.video-border-rounded {
border: 3px solid #333;
border-radius: 10px;
}The styling possibilities are endless! Feel free to get creative with your video borders.
Resizing the Border with the Video
When embedding responsive videos that resize with screen width, you‘ll want the border to properly scale as well.
To do this, wrap both the iframe and border div in a relative positioned container:
<div class="video-container">
<div class="video-border">
<iframe width="640" height="360" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
</div>Style it with this CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-border {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid #333;
}This makes both the iframe and border fluidly scale with the parent container.
Pro Tip: Use the padding bottom hack (56.25% for 16:9 ratio) to make the container match the aspect ratio of the video.
Troubleshooting Iframe Borders
Here are some common issues and fixes when working with iframe borders:
Border isn‘t showing up – Make sure you are targeting the iframe or oEmbed wrapper correctly with your CSS class.
Border overlaps content – Set proper spacing with margins and position iframes carefully with CSS.
Border won‘t resize responsively – Use the relative positioning technique outlined above.
Border radius isn‘t working – Radius needs vendor prefixes. Add -webkit-border-radius and -moz-border-radius in addition to border-radius.
Videos aren‘t consistent – Use a CSS class + oEmbed plugin to automate borders site-wide.
Hopefully these tips will help troubleshoot any problems! Let me know in the comments if you need any other help.
Final Thoughts
To recap, here are some key things to keep in mind:
- Use inline iframe styles or CSS classes to add custom borders around embedded videos
- Wrap oEmbed video URLs in a
<span>with a border class - Make sure the border color/style fits your overall site design
- Position iframes and borders properly so videos resize responsively
- Take advantage of CSS for consistent styling across all video embeds
Adding borders around embedded videos can really make them stand out beautifully on your WordPress site.
I hope this guide has helped you learn how to add stylish iframe and oEmbed video borders to level up your site‘s video presentation! Let me know if you have any other questions.
