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”

    • There is an error in the browser console:
      Refused to display 'https://sproportal.theservicepro.net/login.aspx?QS=0xFEFAA62B68F962616DD5BE1FE1539A06848154457D27F2F5CD9DB3BED6DB3CBD' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

      That means that the owner of the website disable the option for everyone to embed that webpage.

      Reply

    • Hi Chris. I cant see the iframe on the page you provided. Can you share the shortcode you are using? And whet is the URL of the page you are having issues with?

      Reply

  3. Hi There,

    I downloaded your plugin but still canot put up this contact webform from smartsheet.com into my site. It was working, but I think something updated and it was no longer displaying...

    Code I use:

    Reply

  4. Hello!

    try to use your pluging tio inset user google map... but it not work ))

    that what i have from google

    that how i insert in wordpress

    [iframe src="http://www.google.com/maps/d/embed?mid=1cqWbHiCxxj3mPgYsbphYLAjmyhg&hl=en" width="640" height="480"

    please help, why it is not work?

    Reply

    • Your shortcode is working great for me: [iframe src="http://www.google.com/maps/d/embed?mid=1cqWbHiCxxj3mPgYsbphYLAjmyhg&hl=en" width="640" height="480"]
      Maybe you are missing closing square bracket in your shortcode?

      Reply

  5. I'm also having an issue with installing a iframe widget on my wordpress site ! Using the short code after installing and activating the plugin, It just doesn't seem to work. The iframe code is a widget and is much longer than the short code that wordpress uses ?

    Reply

  6. I am trying to set the iframe height to automatically match the height of it's source, the source is going to be a html table that will increase and decrease it's height based on it's database input.

    I have tried using the same_height_as="----" parameter but this appears to only work with elements outside of the iframe.

    Is there a way of doing this with the source? or will I need to purchase the PRO version to get this function.

    Reply

    • Hi Frank.

      It is not possible to solve your issue with iframe plugin unfortunately.

      I am not the owner of the Pro version. You may try to ask there and see if the Pro version will help you.

      Thank you.

      Reply

  7. Hi... I've added this code...

    [iframe src="https://www.openopps.com/search?q=marketing&countryname=United+Kingdom&buyer=&location=&published=any&cpv=&deadline=30days" width="100%" height="480"]

    to this page

    https://ex10.co.uk/iframe-page/

    I've downloaded the plugin and it's showing as active

    What have I missed please?

    Thank you

    Reply

    • The browser shows an error: "Refused to display 'https://www.openopps.com/search?q=marketing&countryname=United+Kingdom&buyer=&location=&published=any&cpv=&deadline=30days' in a frame because it set 'X-Frame-Options' to 'sameorigin'."
      It is not possible to solve with the plugin.
      You can try to contact to the owner of openopps.com and ask if he can enable embedding their website into your website.

      Reply

  8. 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.

    Reply

  9. 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

    Reply

  10. 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/)...

    Reply

    • 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.

      Reply

  12. 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?

    Reply

    • 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.

      Reply

      • 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?

        Reply

        • 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.

          Reply

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

    Reply

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

      Without hhtps and www.

      Reply

      • Have tried

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

        Doesn't work. page comes out blank.

        Reply

        • 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.

          Reply

  15. 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...

    Reply

  16. 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.

    Reply

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

    Reply

  19. 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/

    Reply

  20. Hi,

    I'm using iframe to pull a log in from a https webpage, 3 out of 50 users are getting a timed out error.

    They are all using different browsers and operating systems.

    Any ideas what it might be causing this?

    Without iframe webpage is fine.

    Cheers,

    Reply

Leave a Comment