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”

  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.

    Reply

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

      Reply

Leave a Comment