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

496 comments on “iframe

  1. Maybe it's because plugin is a little bit old but currently Iframe code is working fine as long as you add in in Code mode. Then you can switch to visual mode and return and its still working fine.

  2. Hi, can anyone tell me where can I locate the iFrame code of my WordPress blog. I want to embed the blog to my site.

  3. quick question: i have a chat plugin that is javascript based, and wanted to embed the chat window maximized in the body of the site. I cannot fiugre out how to do that, i tried the [embed_] javascript in the middel and closed with [/embed] and the embed brackets show up on the site.

  4. Hey!

    Is there a code to make it so the iframe only works on the first page? I’m using it for my shop on another website, just so you can still see my header links at first, but I want it to just go to the actual page without the frame when someone clicks on something.

    Hope that made sense, lol

    Thank you in advance

  5. Can anyone tell me how I can load the site correctly (https://4friends.co.uk/) from the iframes - [iframe height="2000" src="https://4friendsonline.co.uk/ordernow"].

    Can anyone tell me how I can load the site correctly from the iframes?

    When I add the iframe to the site, I can't scroll through the iframe content and the "add" buttons don't work.

    Thank you,
    Iulian

    1. Hi Iulian,

      You cannot add 4friendsonline.co.uk website because it is throwing an error:

      Refused to display 'http://4friendsonline.co.uk/ordernow' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

      That means that the owner of the 4friendsonline.co.uk website disabled the ability to load website via iframe on other websites.

  6. I entered this shortcode into wordpress:

    [iframe src="https://app2.simpletexting.com/join/joinWebForm?webFormId=5f43dfe1a14e570328980f08&c=USA" width="470" height="370"]

    But it doesn't show up when I view the page. When I view the source, the code shows that it is rendering as this:

  7. Hi John,
    I am having trouble with the iframe at https://www.inhometutors.com/report-your-hours/ -- using Chrome

    To answer your questions to another user:
    Does the iframe work in other browsers? Yes, works well in Firefox but in Chrome the page accepts the input (username and login) but just refreshes to the same login page,it's like the Submit function doesn't work.
    Do you have adblock plugin installed? Yes. If that's a known issue, is there any workaround? I cannot ask all my tutors who use the page to disable Adblock, I'd rather just tell them to use Firefox
    Does the protocols for parent webpage and embedded page match (http/https)? Yes

    Thanks for your help!

    1. Hi Mia,
      Try to change the SRC of the iframe from: "http" to "https" because it has to match the protocol of your website to work.

    1. Vitalii Post author

      Hi John
      Does the iframe work in other browsers?
      Do you have adblock plugin installed?
      Does the protocols for parent webpage and embedded page match (http/https)?

  8. Could you please add a function, that searches for all vimeo links and updates it to an embedded one.
    There is no plugin yet that allows that. Or do you know one? Else could you might bring us this great feature?
    Basically a Button with a function, that goes trought the database and searches for vimeo links and embeds them, if it finds one. This would be amazing!

    1. Vitalii Post author

      Hi Maxim,
      You can already embed vimeo videos automatically.
      You just need to wrap vimeo video with [embed] shortcodes:

      [embed]https://vimeo.com/341393358[/embed]

  9. I am trying to embed a video from Vimeo. In draft it looks fine but when I publish the post there is a huge white space before the vide. Any idea how to remove it? Thanks

  10. Maybe it's Guttenberg that is confusing me? In the blocks I chose Code and then tried Shortcode. I installed the iframe plugin but don't see it listed, maybe it is the Shortcode option. Anyway, I can not get anything to work, I just see the text or nothing and not the video tour.

    [iframe src="http://public_html/Miami360vr/VirtualTours/Colonnade/index.html" width="800" height="600"]

    I have files created in Panotour and used Filezilla to upload to my site File Manager.

    1. Vitalii Post author

      Hi Richard,
      http://public_html/ is not a valid web-address.
      It is not possible to access that address in the browser.
      I think it is local to your computer and can be visible only on your laptop.
      You need to have a valid URL address.
      Example: http://google.com etc.

      1. I keep getting this youTube at the bottom of any page where I use his plugin and have the plugin active?
        The iframe works , but this at the bottom. Tried recreating several times , same thing.

        https://youtu.be/4qsGTXLnmKs

        Any idea why this would occur? Plugin hacked? or ?

        Any thought. Thnaks

  11. There is a problem with a lot of web pages nowadays. They have server options set to block iframes.

    "Refused to display 'xxxxxxxxx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."

    embed only half works. See this page here. https://robert-chalmers.uk/current-apps/ None of the iframes show - and the embed examples only produce the url link.

    So, not much use in this case.

  12. Dear Ladies and Gentleman,

    Would you please be so kind and adwise me how I could integrate this style in the Iframe code to work fine?

    .embed .map-footer {
    display: none;
    }

    Thank you so much for in advance!

    Robert

  13. JEFF KING

    Added src after [iframe... Ex: [iframe src="https://www.desertsun.com" width="1000px" height="600"]  Seems to work

  14. Been mucking around with this now for half an hour, and I still can't get it working..

    I've tried so many different variations of shortcodes I don't know what I'm supposed to be entering. Up top you say enter in [iframe width="100%" height="480" src="http://player.vimeo.com/video/3261363"] then further down the page you say enter in [iframe scr=""][/iframe]

    So which is it?

    I've tried both and neither work.

    A plugin like this shouldn't be so difficult

    1. Please try this:
      [iframe width="100%" height="480" src="//player.vimeo.com/video/3261363"][/iframe]
      The problem might be in the http/httpS mismatch of the parent page and embedded page.
      I will test it out and will try to improve the documentation.

Leave a Reply to Maxim Cancel reply

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