Iframe

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"].

Parameters:

  • src - source of the iframe [iframe src="http://player.vimeo.com/video/3261363"] (empty by default src="");
  • width - width in pixels or in percents [iframe width="100%" src="http://player.vimeo.com/video/3261363"] or [iframe width="640" src="http://player.vimeo.com/video/3261363"] (by default width="100%");
  • height - height in pixels [iframe height="480" src="http://player.vimeo.com/video/3261363"] (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"], [iframe same_height_as="window"] - iframe will have the height of the viewport (visible area), [iframe same_height_as="document"] - iframe will have the height of the document, [iframe same_height_as="content"] - auto-height feature, so the height of the iframe will be the same as embedded content (works only with the same domain) (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=""];

View source of the Iframe plugin.

VN:F [1.9.17_1161]
Rating: +5 (from 5 votes)

133 thoughts on “Iframe

    • You used something like this: [iframe src="..." width="100%" height="2000"]

      Try this: [iframe src="http://vialikes.me" width="100%" height="2000" scrolling="yes"]

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  1. hi, guys, congrats for your hard and great job.
    I"m moving from WP.com to WP.org. I would never imagine how painful it would be to insert a simple video in WP.org. In Wp.com I manage all my videos with Vodpost. But this seems to be impossible in WP.org, so I decided to download your plugin. Ok, activated it. No further configurations pages as I am concerned. So I paste the shortcode you show above here ( [iframe width...] and replace the url of my video. So what ? Nothing happens. I know the problem is me. But anyway, could anybody help, for God's sake how to just insert a video in my blog ?
    I tried different ways... pasting your code and replacing the url directly into WP.org editor window (html tab) and also I tried via the button upload/insert media, pasting the url of video first and then putting your shortcode. Nothing happens. I'm affraid I'm totally lost. Sorry. I have tried on Chrome and Firefox, I'm using WP.org 3.3.
    I really appreciate your time and help in this issue my friends !

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • Iframe plugin helps to embed iframes - like external sites or video embed codes, based on iframe.

      If you want to embed video from youtube or vimeo - you can use lazy way:
      [embed_ width="500" height="400"]http://www.youtube.com/watch?v=wQL34ZiCNVA[/embed] (remove underscore "_" after first openned embed shortcode)

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  2. I am trying to iframe an affiliate offer into a page in my blog. How do I do this. So I got the source code from an affiliate offer. Then I cut and pasted the code into a page I created. I cut and pasted the shortcode
    [iframe src="http://player.vimeo.com/video/3261363" width="100%" height="480"]
    that you recommended.
    I got that to work.
    But how do I get this to work for with the code from an affiliate offer if I don't have the shortcode. All I have is the page source code. Please help
    Thanks

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • Replace the source of the iframe with the source of your affiliate offer page.
      Like this: [iframe src="your_affiliate_offer_page" width="100%" height="480"]

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
    • [iframe same_height_as="document"] - gets the height of the parent document, not the embedded document;
      [iframe same_height_as="content"] - works only with the same domain;
      I think, scrolling would be good for you.

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  3. Hi,

    To grab to full width of the site I want, into my iframe, I have to make 'width="107%"'. Unfortunately, this does not place the iframe in the middle of my page, if overhangs on the right. How can it automatically adjust the ratio, or failing that, how can I move the whole iframe over to the left a bit?

    Steve

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • Try to set the width in pixels and not in percents. Like this:

      <div style="margin-left:-30px;">[iframe height="960" width="600" src="http://readingeggs.com.au/login"]</div>

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  4. Hi there,

    unfortunately no iFrame is shown on my site. Do you know where the failure is? I have another wordpress blog where no problems come up using iframes. Does it have to do with rights vor visitors or anything like that? Which settings have to be changed to show iFrames correctly?

    Thank you!!

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • please send me the link of the page where iframe should appear and it does not.

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  5. Hi, I'm using the iframe to show a our online store. It's an entire other website. Viewing it is fine but I cannot figure out how to get hyperlinks on my website homepage, for example, to redirect to the page inside of the iframe. Is that possible?

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • I think, it is not possible to click the link and reload iframe without redirecting to that page.

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  6. Hi using the plugin to put a forum into a wordpress page! The "height_same_as" tag doesnt work, it cuts it short! I have changed the height to "2000px" so i can see the whole forum, but the trouble is when viewing a forum post, it loads at the same point further down the page, meaning i have to scroll all the way up to see my forum post. example can be found here....

    http://www.heroespmc.co.uk/?page_id=232

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • Try this code: [iframe same_height_as="#wrapper"], if you want to have the the height of iframe same as "div id=wrapper". But in your situation it is bad idea, because wrapper element is not forced to resize with none element. This method is good when you have, for example, "content" and "sidebar" elements side by side and you want to force the height of iframe inside of the "content" same as "sidebar" element.
      For you I would recomend this code: [iframe same_height_as="content"].

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  7. Hello,

    Writing for second time...

    Still have the same problem, when menu drops down(expand) it goes under iframe, how can I change this( the priority I suggest) ?

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
  8. Hey, This morning I checked our website and all the Iframe codes we have used on almost all of our listings arent working, and all you can see is just the snippet of code.
    Why? I thought I should update the plugin so I did but no help as all the codes are still showing?

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • Check if Iframe plugin activated.
      If it is active and the iframe shortcodes still does not work, than try to uninstall it and remove and then re-install it and activate it again.

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
    • there is no way how to change the scrolling bars. It comes from your browser and Operating system

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
    • Pages "http://jewishmusicstream.com/playing/" and "http://songs.jewishmusicstream.com/web/nowplaying.php" are not on the same domain for javascript can get the height of the iframe content's height. Try to move it to the same domain (like http://jewishmusicstream.com/web/nowplaying.php) and use same_height_as="content" parameter. It should work.

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
    • better try add your video with html tag video, this could help you,
      because tag iframe does not respond for video autoplaying option.

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  9. I´m using it to embed a pdf file. It works on firefox but it doesn´t on safari or chrome (mac).

    This is the code I use:

    [iframe width="100%" height="400" src="http://docs.google.com/gview?url=http://colegioveracruz.es/docs/calendario/calendario.pdf&embedded=true"]

    What´s wrong?
    Thank you

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)
    • Try to change the "&-amp;" (without dash) to "&" in the source path.
      So try this shortcode: [iframe width="100%" height="400" src="http://docs.google.com/gview?url=http://colegioveracruz.es/docs/calendario/calendario.pdf&embedded=true"]

      VN:F [1.9.17_1161]
      Rating: 0 (from 0 votes)
  10. Pingback: embed iframe ESSAI – ça marche… | Site TEST for me

  11. Still new at this, is there an article that helps newbies on 'how-to'?
    Thanks kindly

    VA:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">