iframe

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

475 comments on “iframe

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

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

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

  4. JEFF KING

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

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

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