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. Віталій, як зробити щоб сторінка влізла повністю по висоті? параметр height="100% не спрацьовує, а сторінка міняє розмір взалежності від того чи на телефоні дивитися чи на ПК
    приклад
    [iframe width="100%" height="100%" src="https://secure.wayforpay.com/payment/sanauto"].

    Reply
    • Доброго дня, Вячеслав.

      На жаль, задача з висотою iframe на 100% досить складна.
      І справді height="100%" працює по різному в різних браузерах.
      Я би порадив додати scrollbars і поставити якусь фіксовану висоту як варіант.
      [iframe src="http://web-profile.net" height="800px" scrolling="yes"][/iframe]

      З повагою,
      Віталій

      Reply
  2. Hi there! I manage a multisite network on a restricted network. I get lots of questions about use of iframes, but I typically don't allow it because of security concerns.

    I'm curious how difficult it would be to integrate/create a safe/whitelist of domains that are allowed that could work with your iframe plugin. Happy to tweak this from functions.php (if ideas?), but would rather it be at a plugin level.

    Thanks!

    Reply

Leave a Reply to Ramone Cancel reply