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

486 comments on “iframe

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

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

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

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

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

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

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

  8. JEFF KING

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

  9. 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 Mia Cancel reply

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