iFrame Tag – How to add borders around embedded videos

iFrame – What is it?

Webpages today are using an inline frame to load HTML documents from other sources which may further contain JavaScript or CSS. The script is loaded when the iframe tag is executed by the browser. With the evolution of HTML5, Flash Video Embed it’s becoming obsolete and all major platforms like YouTube and Vimeo have switched to iFrame. It makes sure that the data is compatible with the latest devices.
Most commonly, WordPress users come across it when embedding YouTube videos in their site. Many other sources also provide such codes to allow other people to embed that data on their own sites. Here’s an example which contains the width and height of the YouTube video player which will be loaded when the page containing this embed code is loaded in browser.

How to use iFrame

WordPress, for security concerns, removes iFrame tag when admin switches to Visual Mode from HTML editor. Many admins don’t know what’s happening and publish posts but then they realize that the video has disappeared. We’ve the solution for you.

iFrame Plugin

Installing and activating the iFrame plugin gives the admin an option to include [iframe] shortcode in posts for embedding purposes.
You’ve already seen the default YouTube embed code but after installing this plugin, it will be changed to:

[iframe width="854" height="510" src="https://www.youtube.com/embed/upyIvoWdNFQ" frameborder="0"]

Adding iFrameBorders

If you want to add a border around your iFrame video, using inline styling and modify the code like this:

Or if you’re using the iFrame plugin:

[iframe style="border: 3px solid #EEE;" width="854" height="510" src="https://www.youtube.com/embed/UsCQXe1OHZk" frameborder="0"]

Adding oEmbed Borders

iFrameborders are fine, but oEmbed is also cool and WordPress provides built in support for them. For using them, the URL should be wrapped in the span tag with the desired inline styling. Here’s an example:

https://www.youtube.com/watch?v=upyIvoWdNFQ>

If you want to have the same oEmbed border around all iFrames on your site, add the following CSS class in the stylesheet of theme:

.frame-border { border:3pxsolid#EEE; }

Here’s how to use this CSS class in the iFrame embedding codes:

Span tags can also benefit from the same CSS class, here’s how:

https://www.youtube.com/watch?v=UsCQXe1OHZk

The benefit of using CSS classes is that the color of border can be changed directly from the settings of theme when you decide to switch themes, instead of changing colors individually in each post.
Note: Be careful about embedding iframe tag from suspicious sources because they may use it as a backdoor to hack your site.