iframe

Advanced iFrame ProSpeedup WordPressiframeDonateGitHub

WordPress iframe plugin

WordPress plugin: embed iframe into content.

Iframes are needed to embed video from youtube or to embed Google Map or just to embed content from external page.
WordPress removes iframe when you switch from "HTML" to "Visual" tab because of the security reasons.
So you can embed iframe code using this shortcode [iframe width="100%" height="480" src="http://player.vimeo.com/video/3261363"].

You also can use this shortcode to embed content via simple link: [embed_]http://www.youtube.com/watch?v=A3PDXmYoF5U[/embed] (without underscore '_')
shortcode is a WordPress core feature and based on oEmbed.

Parameters:

  • src - source of the iframe [iframe src="http://player.vimeo.com/video/819138"] (by default src="http://player.vimeo.com/video/819138");
  • width - width in pixels or in percents [iframe width="100%" src="http://player.vimeo.com/video/819138"] or [iframe width="640" src="http://player.vimeo.com/video/819138"] (by default width="100%");
  • height - height in pixels [iframe height="480" src="http://player.vimeo.com/video/819138"] (by default height="480");
  • scrolling - parameter [iframe scrolling="yes"] (by default scrolling="no");
  • frameborder - parameter [iframe frameborder="0"] (by default frameborder="0");
  • marginheight - parameter [iframe marginheight="0"] (removed by default);
  • marginwidth - parameter [iframe marginwidth="0"] (removed by default);
  • allowtransparency - allows to set transparency of the iframe [iframe allowtransparency="true"] (removed by default);
  • id - allows to add the id of the iframe [iframe id="my-id"] (removed by default);
  • class - allows to add the class of the iframe [iframe class="my-class"] (by default class="iframe-class");
  • style - allows to add the css styles of the iframe [iframe style="margin-left:-30px;"] (removed by default);
  • same_height_as - allows to set the height of iframe same as target element [iframe same_height_as="body"], [iframe same_height_as="div.sidebar"], [iframe same_height_as="div#content"]; (removed by default);
  • any_other_param - allows to add new parameter of the iframe [iframe any_other_param="any_value"];
  • any_other_empty_param - allows to add new empty parameter of the iframe (like "allowfullscreen" on youtube) [iframe any_other_empty_param=""];

440 comments on “iframe

  1. I am using the code you provided at it works! finally! So now I need to put more than one video on a page. With this code both videos begin to play as soon as the page opens at the same time. How can I adjust it so that you have to click play on both videos.

  2. I have installed the iframe plugin and here was the original code

    Your browser does not support iFrames.

    i have tried adjusting this correctly shorthand but have had no luck can someone "do it" or show me

    1. Can you share the shortcode which you are trying?
      It shoulb be something like this: [iframe scr=""][/iframe]

  3. Hi there,

    I've tryed to load an IFRAME in 3 different ways and all i got was a blank area.

    I used
    [iframe src="http://buuteeq.cl/files/viladodengo.com.br/360new/" width="width: 100%; height: 600px;"/]
    and
    [iframe src="http://buuteeq.cl/files/viladodengo.com.br/360new/" width="100%" height="600px"]
    and also with your example
    [iframe width="100%" height="480" src="http://player.vimeo.com/video/3261363"]

    and the result was always empty (https://viladodengo.com/apresentacao/video-e-tour-360/)...

    1. Browser throws an error in the console: "Mixed Content: The page at 'https://viladodengo.com/apresentacao/video-e-tour-360/' was loaded over HTTPS, but requested an insecure resource 'http://lucianofavilla.com/'. This request has been blocked; the content must be served over HTTPS."

      That means that you are not able to use different protocols (http and https) for parent page and embedded iframe page. You can use one or another because of security reasons.

  4. How to get rid of height parameter in the iframe code?

    The height=500 is fighting with some other javascipt on my page, so how can I get rid of it, everytime I write another height="800" in my iframe-shortcode it shows up in my source code but if I delete the height-parameter it is showing height="500" in the sorucecode again. Is this a bug?

    1. The height param is set by default if there is no height param in shortcode params. You need to have the height param set otherwise the iframe will have different height in different browsers.

      1. The height is set up for this ID (the one I give the iframe) by javascript.

        How toi set it up to get rid of the height in the plugin? Any chance?

        1. The only way to remove the height is to update the code of the plugin.
          And also update the version of the plugin (set it to 100 for example) for avoiding future plugin updates and reseting your changes.

  5. Totally worthless. Why download this plugin when all you have to do is copy some code from here. Which doesn't work.

    1. Vitalii Post author

      Can you try this shortcode: [iframe src="http://smartsite.cruisefactory.net/?smartsiteid=555" width="100%" height="500"]

      Without hhtps and www.

      1. Have tried
        [iframe src="http://smartsite.cruisefactory.net/?smartsiteid=555" width="100%" height="500"]

        Doesn't work. page comes out blank.

        1. Vitalii Post author

          Oh, I see. The browser throws a different error now: "Mixed Content: The page at 'https://iconcruising.com/test/' was loaded over HTTPS, but requested an insecure resource 'http://smartsite.cruisefactory.net/?smartsiteid=555'. This request has been blocked; the content must be served over HTTPS."
          This is happening because the parrent page and embedded page are loaded thru different protocols and I don't know how to go around it.

  6. Is there a way to set the height as 100% so that it will adjust according to the content in the frame? I tried height="100%" but it doesn't work...

  7. Hi.
    Wondering why there is a large gap after an embedded video (on mobile) in a single scrolling page. The code i used does not specify a height but Google Dev tools says there is a height of 500px on the embedded video. Any clues as to why that is?
    Thanks for your much appreciated help.

      1. Vitalii Post author

        I think that might be related to your theme. You may try to override the styles with CSS or you may contact to the theme's developers.

  8. Greetings. Trying to use the iframe plugin for amazon affiliate links on my site and it doesn't seem to be working

    [iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=growtheheckup-20&marketplace=amazon&region=US&placement=1118008189&asins=1118008189&linkId=c9750cfd0d3ccf8dd8b7d91e871fc653&show_border=false&link_opens_in_new_window=true&price_color=333333&title_color=16a085&bg_color=ffffff"]

  9. I'm trying to use the plugin, and I tried the demo shorthand code:

    [iframe src="http://www.youtube.com/embed/4qsGTXLnmKs" width="100%" height="500px"]

    But when my page loads, and I look at the the code in the Google development tools, it shows the src as undefined.

    Any idea what's going on?

    Here's the page:
    http://oregoncoastdrones.com/leaflet-test/

    1. Does not seems like this output was made by Iframe plugin.
      Maybe you have some other iframe-like plugin installed?

Leave a Reply

Your email address will not be published. Required fields are marked *