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

387 comments on “iframe

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

    1. 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'.

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

    1. 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!

      1. 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'.

    1. Vitalii Post author

      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.

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

    1. Vitalii Post author

      Your shortcode works perfectly for me. I can see "HOBBYCNC SALES AND USE TAX POLICY STATEMENT..."

      Try to disable other similar plugins and see if that helps.

      1. iFrame works when I disable:

        bbPress is forum software with a twist from the creators of WordPress.
        Version 2.5.9 | By The bbPress Community | View details

        I can't disable my Forums!

          1. Sorry for the delay. This was not highlighed on my email?!?
            I installed the test and IT WORKS!
            Thanks, makes my page look so much nicer!

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

            1. Vitalii Post author

              This is the link to the file. Can you provide the URL provided by OneDrive for sharing and embedding?

              1. Mats Unnerholm

                When I paste the code in your comment box it does not show.

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

    1. Vitalii Post author

      Try to align it with "to center" button which should be on the main panel in your TineMCE content editor.

  6. Hello, I placed the [iframe src = "https://vimeo.com/169869591"] but does not show me anything in the post. Thanks

    1. Vitalii Post author

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

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

    1. Vitalii Post author

      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]

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

      1. Great thanks. The reason I tried Google Drive was because someone else mentioned doing so in a discussion of your plugin in tandem. I'll let you know if the other method works!

  9. Filipe

    Hey Vitalli, the iframe has a light grey background to it, is it possible to change the colour of background?
    Thank you, Regards

    1. Vitalii Post author

      Try this shortcode: [iframe allowtransparency="true"]

      Or this one: [iframe style="background-color: transparent;"]

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

    1. Vitalii Post author

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

    2. I am having same issue. was working a few days ago but getting an error now

      Don

      1. Vitalii Post author

        There are million of reasons and it is hard to guess without seeing the page with the issue.
        Can you share the URL with iframe?

            1. 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!

              1. Vitalii Post author

                Try this one:
                [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"]

                Fixed quotes and removed semicolon.

                1. That is the ticket! You have good eyes, as I reviewed your suggestion but could not see any difference.
                  Many thanks, how can I donate to you?

                    1. I sent a donation through PayPal, hope you got it (June 7). Thank you.

                  1. Vitalii Post author

                    Yes, I got your donation. Thank you very much for your support. It is very important for me to keep maintaining the development.

Leave a Reply

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