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”

  2. Hi,

    I'm trying to embed the video on this artcile: http://www.fox13news.com/health/217731018-story onto our company website.

    I've tried this:

    [iframe width="100%" height="480" src="http://up.anv.bz/latest/anvload.html?key=eyJtIjoiZXBmb3giLCJwIjoiZGVmYXVsdCIsInYiOiIzMTc4NDUiLCJwbHVnaW5zIjp7ImRmcCI6eyJjbGllbnRTaWRlIjp7ImFkVGFnVXJsIjoiaHR0cDovL3B1YmFkcy5nLmRvdWJsZWNsaWNrLm5ldC9nYW1wYWQvYWRzP3N6PTY0MHg0ODAmaXU9LzYzNzkwNTY0L3d0dnQvbmV3cyZjaXVfc3pzPTMwMHgyNTAmaW1wbD1zJmdkZnBfcmVxPTEmZW52PXZwJm91dHB1dD12YXN0JnZwb3M9cHJlcm9sbCZ1bnZpZXdlZF9wb3NpdGlvbl9zdGFydD0xJnVybD1bcmVmZXJyZXJfdXJsXSZjb3JyZWxhdG9yPVt0aW1lc3RhbXBdJmRlc2NyaXB0aW9uX3VybD1odHRwJTNBJTJGJTJGd3d3LmZveDEzbmV3cy5jb20lMkZoZWFsdGglMkYyMTc3MzEwMTgtc3RvcnkifX0sInJlYWxUaW1lQW5hbHl0aWNzIjp0cnVlfSwiYW52YWNrIjoiYW52YXRvX2VwZm94X2FwcF93ZWJfcHJvZF9iMzM3MzE2OGUxMmY0MjNmNDE1MDRmMjA3MDAwMTg4ZGFmODgyNTFiIn0"]

    But I get a big empty space.

    My assumption is something unique going on with that that long authentication key, but they do provide embed code on the original site. Just a bit different which I've modified.

    Any ideas?

    Thanks,

    Webster

    Reply

  3. hi,suddenly my iframe only shows empty space.Pls help .Here is my iframe shortcode

    [iframe src="http://job-search.jobstreet.com.my/malaysia/job-opening.php?key=Warisan+TC&location=&specialization=&position=&area=3&src=12&sort=&order=" width="100%" height="600"]

    Reply

    • Now you have error in the browser console: Mixed Content: The page at 'https://www.sbdairport.com/facilities-amenities/weather/' was loaded over HTTPS, but requested an insecure resource 'http://www.anyawos.com/KSBD'. This request has been blocked; the content must be served over HTTPS.

      Both URL (the parent page and embedded page) should be loaded thru the same protocol: http or https.

      Reply

  5. Dear Vitalli,

    I'm kind of a noob with WordPress. I use your Iframe plugin and want to display the next page [http://www.toernooi.nl/sport/tournament.aspx?id=DB202A19-E4D8-4B99-AA60-3016ECFD84A3] on my page [wp.banima.nl/toernooi. I use the code [iframe scr= "http://www.toernooi.nl/sport/tournament.aspx?id=DB202A19-E4D8-4B99-AA60-3016ECFD84A3" width="100%" height="1000"], but can't get it to work. Please, can you help me?

    Many thanks in advance!

    Richard

    Reply

  6. Hi there! I'm trying to set an iframe on my website julienbraida.com to display/embed only a specific part of another website at this address: http://rmc.bfmtv.com/mediaplayer/podcast/les-grandes-gueules-du-sport/.

    I only want to display on my website the 2 first podcasts and the left picture on the top of this page. It's an approximative zone of 1300x310px.

    When i use your WP plugin, it shows up nothing only a white zone on my website. Same thing with the "embed" code instead of iframe. I've tried with different addresses and nothing shows up, only white empty zones ...

    Can you help me figure out why i can't display anything using an iframe or embed code on my website please?

    Thanks!

    Reply

    • The owners of rmc.bfmtv.com does not let embed their website on other pages.

      Here is the error code from the browser console:

      rmc.bfmtv.com/:1336 Uncaught SecurityError: Blocked a frame with origin "http://rmc.bfmtv.com" from accessing a frame with origin "http://localhost". Protocols, domains, and ports must match.

      Reply

  7. Hi there, I'm a WordPress newbie and have just installed this plugin to embedd an external calendar in an iframe. This works very good with Firefox, Chrome and Edge but unfortunately not with IE11. Any idea how to fix this or is this a known uncompatibility? Thanks

    Reply

  8. Hello,

    I was using this plugin from some years, but now it's showing blank screen.

    I was using code as:

    [iframe src="https://www.nseindia.com/companytracker/cmtracker.jsp?symbol=ifci&cName=cmtracker_nsedef.css" width="100%" height="800"]

    Please check the issue.

    Thanks

    Reply

    • The owner of the nseindia.com website does not allow you to embed his page on other websites anymore.

      You have to contact the nseindia.com website owners if you want to embed it again.

      The browser throw an error in the console:

      Refused to display 'https://www.nseindia.com/companytracker/cmtracker.jsp?symbol=ifci&cName=cmtracker_nsedef.css' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

      Reply

  9. Question: Ia hev been using your plugin for a while now and it works great. Now I want to use it for something different whit a map inside. What I would like to manage, somehow, is when the user moves the mouse over the map (which is inside the iframe code) nothing happens. Now when you move the mouse over it the map zooms in or out, something I wish to avoid somehow. It would be great that when the user clicks inside the iframe they can use the zom function. Can this be done?

    This is the code: [iframe src="http://mapa.tutiempo.net/#39.95186;-2.90039;6" width="100%" height="500"]

    I have managed something on the http://www.spanjevandaag.com/test/ using a div I have found somewhere but that freezes everything.

    Thanks

    Reply

    • I appreciate your work on this, it's awesome. I'm having a problem however. I'm trying to display a page of Amazon book reviews for the author's WP site I'm making but it just displays a blank page as if there's nothing there. I use this code -

      [iframe_fix src="https://www.amazon.com/Danni-Pieces-Book-One-Forced-ebook/product-reviews/B01GDH7QVY/ref=cm_cr_dp_see_all_summary?ie=UTF8&showViewpoints=1&sortBy=helpful" width="100%" height="500"]

      I use the [iframe_fix] shortcode because I tried the fix you recommended for the user below, but still the same results. Is there any help you can offer me? I'd be ever so grateful!

      Thanks!

      Reply

      • You will not be able to embed amazon website because amazon does not allow to do it.
        Iframe throw an error in the browser's console:

        Refused to display 'https://www.amazon.com/Danni-Pieces-Book-One-Forced-ebook/product-reviews/B…H7QVY/ref=cm_cr_dp_see_all_summary?ie=UTF8&showViewpoints=1&sortBy=helpful' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

        Reply

    • I tried your iframe shortcode on different website and it works fine.

      The error "ARVE Error: no id set" is not related to Iframe plugin and it should be related to "Advanced Responsive Video Embedder" plugin or something similar.

      Reply

  11. I have (at the bottom of the page): [iframe src="http://taxcloud.net/SalesTaxPolicy/?m=kiO19bxgfaU=" width="100%" height="550"]

    It was working at one time. Now shows only as an empty space. View the source and the iFrame info is there, but the src="" - the URL is stripped out of the iFrame

    Reply

  12. Hello,

    I am trying to embed an Excel worksheet I have on OneDrive.

    But the embedded content that comes up when I paste in the code is a video..?? I think its in your plugin instruction .

    Pls help .

    Reply

  13. Hi there,

    First of all i want to thank to your coding. It's a wonderful work.

    i want to algin "iframe" to center of page but i don't know how. Would you please to suggest me a solution?

    Regard.

    Reply

    • You cannot embed the direct vimeo link via iframe shortcode.
      You may use this shortcode to embed it: [iframe src = "https://player.vimeo.com/video/169869591?color=ff0179&title=0&byline=0&portrait=0"]

      Reply

  15. Hi

    I install iframe to show video from sproutvideo.com to my website.

    all the time it's link to iframe youtube video.

    code in post

    [iframe src="http://videos.sproutvideo.com/embed/d49bdeb41a1ae1c55c/cd635fdc4adb5af5' width='630' height='355' frameborder='0' allowfullscreen]

    show on post

    http://group10online.com/video-test/

    please let me know how to change from iframe defaut to my video

    Reply

    • Quotes are different in your shortcode.

      Try this one: [iframe src="http://videos.sproutvideo.com/embed/d49bdeb41a1ae1c55c/cd635fdc4adb5af5" width="630" height="355" frameborder="0" allowfullscreen]

      Reply
  17. Pingback: Prueba de iframe

  18. Hi Vitalii, trying to use iframe to embed a PDF residing on Google Drive, but no content is appearing. Can you take a look and see what you think might be happening?

    http://www.lopadatabase.com/pressure-vessel-failure-10-minutes-or-less-for-release-of-contents-where-the-materials-of-construction-are-not-critical/

    Uses the following iframe shortcode:

    [iframe src="https://drive.google.com/open?id=0B6EeKtgDkS6Qb3F6NHhnTUotejA" width="100%" height="2000"]

    Page height is arbitrary right now. Tried changing a few parameters but it didn't matter.

    Reply

  19. Hey Vitalli, the iframe has a light grey background to it, is it possible to change the colour of background?

    Thank you, Regards

    Reply

  20. Having an issue as of recent wordpress 4.5.1 update, iframe is not working.

    [iframe allowtransparency="true" frameborder="0" style="border:none; height:1000; width:100%" src="https://www.secure-booker.com/bellavisage/BookOnlineStart.aspx" target="_blank"]

    Reply

    • Your issue is not because of the Iframe plugin. Its because the owner of the embedded website disabled the option to embed it on other websites.

      Chrome throw this error in Developer Console:

      Refused to display 'https://www.secure-booker.com/bellavisage/MakeAppointment/Search.aspx' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://bellavisagelakeland.com https://*.bellavisagelakeland.com bellavisagelakeland.com *.bellavisagelakeland.com".

      Reply

            • Below is the text that I am seeing on that page, can you not see the same? What other info do you need? (I have the plug-in "iframe" installed and active.)

              xxxxxxxxxxxxxx

              Comox High and Low Tides

              The high tides and low tides for today and the next 2 days can be seen below in a nice graph.

              [iframe: src=”http://tbone.biol.sc.edu/tide/tideshow.cgi?site=Comox,+British+Columbia&type=graph&gx=490&gy=180&glen=3&cleanout=1&killsun=1&fontsize=-1″ frameborder=”0″ width=”100%” height=”600″ scrolling=”no”]

              Note that these are predictions, and may be influenced by many unrelated factors, such as strong winds, heavy rains, etc. Use entirely at your own risk.

              These predictions for low and high tides for Comox, British Columbia, are for reference only – use this tide information as an approximate guide only!

              Reply

Leave a Comment