iframe

Advanced Iframe ProiframeDonateGitHub

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=""];

500 thoughts on “iframe”

  1. Great plug in, thanks!

    Is there anyway to force the third-party links that are served up in the iframe to open in the same iframe? By default they open in a new tab and I'm trying to keep some hosted content within the confines of my site without loosing my visitors to a new tab.

    Thanks!

    Reply

    • I think, that there is no way to force the behaviour of the links opening.

      Iframe is the page from other domain and you can't control it. And you can not add your styles or javascript to change iframe page.

      Reply

  2. Hello,

    Can you help me?

    I want to see scroll bars, transparency, frame border, and a full height iframe (of the content target).

    The page will not do these things.

    I am editing and saving the page in HTML view.

    And, I've tried all of the height parameters (including % and "1200" for pixels. I can only get about 480 px height in all attempts.

    And I can never get scrolling! :(

    And I'd love for page transparency to work, as my page BG is not white. But, I'm pulling a Google search result, so perhaps the masters of our universe in GoogleLand control iframe results based on thier page CSS (or GSS!).

    Here is my code.

    [iframe id="ESL-Minimal-Pairs"

    width="100%"

    height="100%"

    frameborder="1"

    scrolling="yes"

    marginheight="0"

    marginwidth="0"

    allowtransparency="true"

    src="http://www.google.com/#q=esl+OR+efl+%2B%22minimal+difference%22+OR+%22minimal+pair%22&hl=en&prmd=ivns&ei=HSFZTvviF4ivsAK66_iJDA&start=10&sa=N&bav=on.2,or.r_gc.r_pw.&fp=3665754608edbaf3&biw=1366&bih=647"]

    And thank you for this super easy to use plugin!

    Christopher

    Reply

  3. I have two videos embedded on one page (http://www.ecosmartguide.ca/sustainable-living/alternative-energy-sustainable-living/renewable-energy-solar-highways-algae/), and the first works with the plugin, but I can't figure out how to set the parameters for the 2nd. It's a PBS video, and my best guess is that I need to use the classid (classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000") and/or the "flashvars" value (value="width=512&height=288&video=1899765658&player=viral&end=308000&lr_admap=in:pbs:0"). I tried this, but it doesn't work: [iframe width="512" height="288" class="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" src="http://www-tc.pbs.org/video/media/swf/PBSPlayer.swf"]. I've tried adding an id of "1899765658", to no avail. Any thoughts on how to do this?

    Reply

  4. Any way to enable scrolling up and down only? When I turn it on, it seems to only do both, and then my left to right gets all messed up. I'd like to not allow left to right scrolling, just have that fit the width, but DO want to allow top to bottom scroll. Possible?

    Reply

  6. please see

    http://holylandbiblebee.com/genesis-50/

    I am experimenting so I have 5 videos there.

    the first is invisible (which is the problem:-)

    the second and the third are non-iframe-plugin implementations, disregard them.

    the fourth is the iframe plugin sample, edited so it displays at 30%.

    Disregard the fifth video too:-)

    Anyway, the plugin seems to work with vimeo but is not working with youtube!

    Here is the code I am using:

    [iframe width="30%" height="30%" src="http://www.youtube.com/watch?v=VbE1ya_M1tM"]

    What do you think?

    Thanks a lot!!!

    Reply

  7. Is there an easy way to set the position of the page I am showing in the frame? The most important content is down about 250 pixels so I don't want my page viewers to have to scroll every time.

    Reply

  8. If I use this plugin, will I see the video in a WP post preview? I haven't published my post yet, but in the preview page, I only see blank space, but no actually embedded video.

    Thanks!

    Reply

  9. hi

    it will be possible to have a button on post/page editor? so when you click the button it add automatically the string [iframe src=""] so you can simply add your url

    Reply

    • I made it in more flexible way.
      You should update to version 1.4.0.
      I added "same_height_as" parameter, which allows to set the height of iframe same as target element.
      Example 1: [iframe same_height_as="body" src="http://player.vimeo.com/video/3261363"] - iframe has the same height as "body" element
      Example 2: [iframe same_height_as="div.sidebar"]
      Example 3: [iframe same_height_as="div#content"].

      Reply

    • I added "id" and "class" parameters in the version 1.3.0.
      You have to update the Iframe plugin and you can use it like this: [iframe id="my-id" class="my-class" width="640" height="480" src="http://player.vimeo.com/video/3261363"].

      Reply

    • You can embed Google Map like this:
      [iframe width="425" height="350" src="http://maps.google.com/?ie=UTF8&ll=37.0625,-95.677068&spn=40.460237,79.013672&t=h&z=4&output=embed"]
      But you have to update to version 1.2 because the bug with Google Map was fixed.

      Reply

  13. Fantastic plugin but I have a question. I want to show one ftp directory but always I have 403 error "Forbidden access"

    ¿Any idea? If I put in explorer the same directory I can see the files correctly

    Reply

  14. Trying to use this to embedded our mapping API which needs to pass more parameters in the iframe call fromt he WP page eg

    Is there anyway your plug in can be extended to pass any parameters within the call rather than just ones you specify?

    Thanks

    Reply

    • Sorry, but I could not help you. :(
      I want to leave my plugin light and simple.
      Your feature request will make this plugin very complex :(.
      I include only minimal functionality what is connected only to iframe.

      Reply

  15. Hello,

    Great plugin - was just wondering if there was a method to have the height dynamically change to suit the embedded page? I don't mind if it requires some complicated code patching - just enquiring if it's possible!

    Thanks in advance,

    Adam

    Reply

    • You may use this code: [iframe width="100%" height="100%" src="http://player.vimeo.com/video/3261363"]
      width="100%" - works good, but height="100%" - does not works correctly in all browsers.

      Reply

  16. Can you explain how to use the marginheigth & marginwidth parameters? I have experimented using different values, but can't tell that they make a difference.

    What I would like to do is specify an X, Y origin of the displayed website relative to the frame. In other words, to control how the website is displayed within the frame. Is that possible with these parameters?

    Reply

  19. I am having difficulty making this work with an embed generated by Google public data.

    You can see the chart embedded here:

    http://www.colalife.org/2011/05/12/a-little-reminder-why-we-are-doing-this/

    To do this I've embedded the Google code in the HTML tab and published without going back to VISUAL tab. When I try and use the iframe shortcode I get the outline of the chart but none of the content or functionality.

    The embed code I am using is:

    And I am running WordPress 3.1.2

    Thanks

    Simon

    Reply

  20. Hey there-

    Thanks for the plugin. I've successfully got it working in FF and IE. I do have a problem with rendering the background transparent in IE8. It shows up white instead of transparent. It's fine in FireFox.

    Do you know of any way to make the iframe display properly in IE8?

    I've been working on this most of the day and can't figure out how. No one on WordPress forum has been able yet to solve the mystery.

    Don't know if there is something that can be written into the plugin code. Any thoughts?

    Thanks

    Kent

    Reply

Leave a Comment