Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Why and How you should be using iFrames for Videos in WordPress?

Last updated on by
Follow WPBeginner on YouTube
Why and How you should be using iFrames for Videos in WordPress?

You remember those old embed tags on videos? Yeah, those are going to be outdated pretty soon as the web shifts to HTML5. Almost all major video sites are switching from using Flash video embeds toward using HTML5, and we recommend that you think about doing the same for your WordPress blog. By using the iFrame tag for your videos, you ensure that your videos are displayed for people on the computer, iPhone, iPad or any other device that may come in the near future. Traffic from mobile devices are increasing at a rapid rate, and this is something that we should all be prepared for.

Youtube, Vimeo, and others have already switched to using the iFrame version as their default method of embedding videos on the web. However for security reasons, the iFrame tag disappears in WordPress when switching from Visual Mode to HTML mode, or vice-versa. It can get very frustrating if you don’t know why this is happening. You may even publish a post only to find out that your video was never included. You might think it is a bug or an issue with your WordPress installation, but it is not. But don’t worry, we have a way for you to use iFrames for Videos in WordPress without a hassle.

One way is to remove the visual editor in WordPress, and you would never have to worry about the iFrames disappearing. However by doing so, you will lose the ability to use the internal linking feature that was added in WordPress 3.1. So this is not that good of an option.

The best option is to use a plugin called Iframe. This plugin provides an easy way to insert iFrames in your posts. Here is a step by step guide to install a plugin.

Once you have installed and activated Iframe, you will get a new shortcode to use in your post. [iframe: ]

For example, by default Youtube’s iFrame embed code will look like this:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/fUfgmRCPI0E?rel=0" frameborder="0" allowfullscreen></iframe>

With Iframe plugin, you would simply change the code to:

[iframe width="480" height="390" src="http://www.youtube.com/embed/fUfgmRCPI0E?rel=0" frameborder="0"]

We recommend you start using iFrames for your videos right now and make your site accessible for mobile readers.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • santhosh

    please tell me how to remove background from youtube video ? i should see only video

    with out background

  • http://www.sitebuilder.ws/ SiteBuilder

    I like Iframe plugin solution as opposed to using the built-in video support a lot of themes have. There’s nothing worse than changing your theme and finding broken shortcodes.

  • bizzyLabs

    @wpbeginner Yeah I have a tendency to do things like that but I always find it nice to communicate some thoughts with other WordPress related site owners :)

  • wpbeginner

    @bizzyLabs I think you answered your question yourself :)

  • wpbeginner

    @NetStyleLife Article is updated to reflect the changes. Thanks for the heads up.

  • NetStyleLife

    Apparently the Insere iFrame plugin has been deleted from the WP repository because it has a Groupon cookie in the code (http://wordpress.org/support/topic/plugin-insere-iframe-groupon-cookie). I’ve been using the iFrame plugin (http://wordpress.org/extend/plugins/iframe/), and it seems to work fine.

  • Javier Villanueva

    I always wondered why iFrames disappeared when switching between views, what are these security reasons btw?

  • bryce.redford

    It would appear that this plugin has now been removed

  • Kim Green

    Thank you so much for letting me know I am crazy! I couldn’t figure out what was happening. I would put the code in the HTML side of the post and then when I switched to other view of the post, it was gone.

    Thanks!

  • http://www.techwork.dk Thomas

    For Youtube video I use a plugin called: “Youtube with Style” I think that really make my video’s look cool:

    http://wordpress.org/extend/plugins/youtube-with-style

  • http://www.dragonblogger.com Justin Germino

    Interesting plugin and this does help as I have been bit by the HTML -> Visual editor before and not just for YouTube video but embedding Amazon affiliate iFrame code.

  • http://www.spiderpw.com.br Alex Almeida

    I think this is a great plugin, but to video and google maps embeds I like more this one:
    http://www.matteoionescu.com/wordpress/embed-html