iframe

Advanced iFrame Proiframedonateview source

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"], [iframe same_height_as="window"] - iframe will have the height of the viewport (visible area), [iframe same_height_as="document"] - iframe will have the height of the document, [iframe same_height_as="content"] - auto-height feature, so the height of the iframe will be the same as embedded content. [same_height_as="content"] works only with the same domain and subdomain. Will not work if you want to embed page "sub.site.com" on page "site.com". (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=""];

275 comments on “iframe

  1. Hello,

    Thanks for your plugin, it is all working well apart from one thing. I have used iframe to import information from my Rootsmagic site and this is displayed on one of the pages (Family Tree and individuals), but if there are a large number of individuals using one of the surnames eg Porter in P, the page is not large enough to display all the entries. I'd appreciate any advise on how to enlarge the panel or set up a second page?

  2. hi
    i would like to ask in my website i used iframe for my book engine
    and i need redirect for paypal but i could not .
    on the plugin
    i can do it ?
    http://www.istanbulshuttleservices.com/book-airport-shuttle/from-hotel-to-sabiha-gokcen-airport/ in here you can see this too
    last step it should redirect to paypal but not work
    you can see how to redirect to paypal in here https://www-21i.bookeo.com/bookeo/b_tourismopolitan_start.html?type=221NJW7HY1479D83E8DF&ncs=knwwrhmhmf
    but i could not do in my website
    can you help me please ?

    • webvitaly Post author

      Advice: do not use IE and use some modern browser.

      Iframe plugin works correctly in every browser.
      The site, which you shared does not support IE.

  3. Pingback: How to dynamically resize the height of an iframe

  4. Nikola

    is possible to add captions (srt file) ?
    something like
    [iframe src="" caption="example.com/captions/123.srt"]

  5. jimmyjammin

    Trying to use an iframe like a video player window of sorts for adobe connect video (internal site so can't give live example, sorry). I got the initial iframe on the page working no problem:

    [iframe id="player" src="https://video.link" width="100%" height="600px" scrolling="no"]

    However when I try to point other video links to the iframe, they open in a new tab instead:

    <code><a href="https://video.link2" rel="nofollow"></code>

    Thoughts? Thanks in advance.

  6. Pingback: Embed or Link to multi-calendar view of your Google Calendar @ Alan Kleymeyer's Blog

  7. Pingback: WordPress plugins @ Alan Kleymeyer's Blog

  8. Pingback: WordPress Notes @ Alan Kleymeyer's Blog

    • webvitaly Post author

      Shortcode works if content is parsed thru do_shortcode function.
      If page template was not properly build than it could be the explanation of the problem.

    • Jason Brantley

      Hmm, I wonder why the Theme used would make a difference on this? I'm using a custom child theme on Genesis Framework.

  9. I used the iframe (plug-in) code in the description area of "categories". It worked nicely. Once I assigned a category to each post, the iframe content related to that category displayed tips at the end of each post. Since the upgrade to the latest WordPress, that function has gone away (the iframe code will not work in the category description field). Any guidance? Thanks.

    • I just want to follow-up to my earlier post. I am running a test BLOG that has not been upgraded to the latest version of WordPress. I am using the Iframe plugin. The embedded iFrame is displaying correctly. The source code is as follows. But the following code does not appear is the updated WordPress with the IFrame plugin operating:

      • webvitaly Post author

        If iframe shortcode worked in the categories description and now in newer version it does not so the developers changed something in the core.
        I would recommend you to search some plugin which will help you to execute shortcodes in category descriptions.

        • That's what we're doing. But it appears that the WordPress update somehow does not allow the execution of shortcodes in category descriptions with the current version of IFrame. Do you know of any updates that will be made?

  10. Mark Stronge

    Same issue, the height isn't working for small iframes e.g. [iframe scrolling="no" frameborder="0" width="227" height="75" marginheight="0" src="http://www.clocklink.com/html5embed.php?clock=008&timezone=UnitedKingdom_Belfast&color=black&size=227"] still gives a larger height

    • webvitaly Post author

      I tested your iframe shortcode and it worked good. Iframe have height of 75 pixels as it was set.

      • Mark Stronge

        For me, either the iframe-class css is interfering or this

        I don't know why this is happening though.

        • Mark Stronge

          There is a css called fluid-width-video-wrapper that seems to be setting up a 218px high wrapper when all I need is 75px for the iframe above. It must be a theme issue then?? I am using Pinboard theme with WordPress 3.6

  11. Since the Update for WordPress to 3.6 the paramater for same_height_as="content" isn´t working anymore. I just see the default height for the frame (480px)
    Any Ideas how to fix the issue?
    Thanks in advance :)

    • I can confirm that same_height_as="content" doesn't seem to work on WordPress 3.6.

      The iFrame I'm attempting to add is on the same domain as the WordPress site.

Submit comment

Allowed HTML tags: <a href="http://google.com">google</a> <strong>bold</strong> <em>emphasized</em> <code>code</code> <blockquote>
quote
</blockquote>

Current ye@r *