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

475 comments on “iframe

    1. Vitalii Post author

      Unfortunately it is not possible. You are not able to control the styles of embedded page due to security reasons.

  1. Is it possible to scale an embedded web page to fit the width of the container in which it was embedded?

    1. Vitalii Post author

      Unfortunately it is not possible. You are not able to control the styles of embedded page due to security reasons.

  2. Hi,
    I am embedding a website in an iFrame which is having a YouTube link embedded in it.
    I am not able to turn it to full screen. Is there any way to do it.

    Regards
    Jaskaran

  3. Hi,
    Is there any usage limit in the free version. As i have to post over 3000 posts in a month.
    earlier i was using some other plugin for iframe and that stopped working over 1000 posts.
    Can i rely on the free version of this plugin for all my posting needs?

    Thanks

  4. Thanks.

    I've a new issue. Since the last weekend the page in nor opening into the iframe. Always in a new window. I deactivated the 2 plugins that I've installed and nothing. I don't know more what I can do. Do you have any suggestion.

      1. Sorry, but the website is under construction yet. Could you tell me the possibilities? I didn't anything. I just installed some plugins (advanced columns and a slider plugins and removed both).

        1. vitalii Post author

          Can be dozens of answers here.
          The most popular is that the owner of the website does not allow to embed his website anymore.

            1. A doubt: is possible to embed a html page? I'm trying iframing a html5 game.

              1. I activated the safari console and I got these warnings (no errors):

                [Warning] Unexpected CSS token: : (js_composer.min.css, line 1)
                [Warning] Unexpected CSS token: : (js_composer.min.css, line 1)
                [Warning] Unexpected CSS token: : (js_composer.min.css, line 1)
                [Warning] Unexpected CSS token: : (js_composer.min.css, line 1)
                [Warning] Unexpected CSS token: : (js_composer.min.css, line 1)
                [Warning] Unexpected CSS token: : (js_composer.min.css, line 1)
                [Warning] Unexpected CSS token: : (settings.css, line 917)
                [Warning] Unexpected CSS token: : (font-awesome.min.css, line 5)

  5. Hi

    How to center iframe in page and how to center content in iframe? Thanks

    1. vitalii Post author

      You may try to center iframe of page using TinyMCE "center text" button.
      You are not able to center content in iframe.

  6. hello
    i just using iframe plugin
    my question is what if my website is https but my iframe is from http, can i use that?
    because i already try but not working on my website

  7. I have a pdf file with form fields in it and when I utilize iframe it does not allow for the entry into those fields.

    Here is my code:
    [iframe width="100%" height="580" width="610" scrolling="yes" src="http://www.veterans-freight.com/wp-content/uploads/2016/03/Broker-Carrier-Website-2.pdf"]

    When I open the source file on my computer it works fine. When I open the file via the web address it gives the same error. So I don't know if I'm fighting a problem with iframe or with form fields in a pdf file.

    My aim in this is that I need to be able to have users enter, print or email the pdf.

  8. Hello!
    I am trying to make the second link work, I don't know why it is just showing when I am logged in, but if I'm logged out of wordpress, I can't see it

    [dt_sc_full_width first][dt_sc_titled_box type="titled-box" title="Patientez le temps que les plages horaires se chargent" icon="fa-cogs" bgcolor="" variation="" textcolor=""]

    Choisissez votre plage horaire.

    [/dt_sc_titled_box][/dt_sc_full_width]

    [iframe src="http://www.madamecognac.com" width="100%" height="1800"][dt_sc_hr_large /]
    [iframe src="https://bonjour-sante.ca/AgendaWeb.aspx?RessourceId=140097&ClinicId=43266" width="100%" height="2800"]

  9. Neither the plugin nor the Embed code work on my WordPress page. Where can i find out if for some reason embed is not allowed. And can i change that?
    Thanks

    1. Are you able to install plugins on your website?
      You are not able to install plugins if you are using wordpress.com service.

  10. Hello, I installed your plugin and manually made this:

    [iframe width="100%" height="100%" src="http://api.autotrader.nl/voorraadpagina/alle/zoekresultaten/did--1011387/sorteer-op-merk-en-model/?stock_count=9999&searchForm=0?show_stock=Y&pagesize=9&view=tile"].

    But on the website page is only a small screen with scroll bars. I want to see the full page as it is:

    http://api.autotrader.nl/voorraadpagina/alle/zoekresultaten/did--1011387/sorteer-op-merk-en-model/?stock_count=9999&searchForm=0?show_stock=Y&pagesize=9&view=tile

    Did I something wrong? And... can you help me with this?

    Thanks!

    Kind regards,
    Peter

  11. Iframe plugin error

    Im using the plugin but now the home page starts in the middle of the page and not on top
    cause i have the iframe plugin in the middle
    how to fix this?

  12. I am uploading some PDF files that I want to bring up on a wordpress page.

    The problem is that I upload an updated file and it took about 2 hours for the change to actually be shown. Is this an Iframe or an hosting problem?

    This is the code I'm using on the page:
    [iframe width="100%" height="480" src="http://www.veterans-freight.com/Available-Loads/Detheridge/AvailLoadsFSD.pdf"]

    1. Iframe plugin is not responsible for caching your pdf files. The culprit can be the cache of your browser or CDN if you are using it.

  13. I turned this embed

    into this
    [iframe width="100%" height="100%" src="https://pages.omkt.co/LandingPages/LandingPage.ashx?embeddedIdentifier=402%7C2BA320%7C51E3%7CC0%7C29F1EF85"]
    and it's not showing up. Any suggestions?

  14. Please help me. I've been trying to add this MLS link into a page. I downloaded and installed your plugin on the Visual section of WP editor, but it doesn't show the feed, but instead shows your photo and script.

    The link I received from the Realtor was
    http://framing.usamls.net/framing/default.asp?f_id=RXS%5DSSVRSSRVSS%5DSXR
    I went to the page and copied the url address and pasted it into your shortcode below and added a hyperlink

    [iframe src="http://framing.usamls.net/framing/default.asp?f_id=RXS]SSVRSSRVSS]SXR" width="100%" height="500"]

    Another local site that uses the same MLS feed is http://www.kimprestonrealestate.com
    They have it placed in their page similar to what I would like.

    Can you please tell me what I am doing wrong?

    PS, the page is on Draft mode while I get this working.

    4.0

    1. You need to embed this shortcode:

      [iframe src="http://framing.usamls.net/framing/default.asp?f_id=RXS%5DSSVRSSRVSS%5DSXR" width="100%" height="500"]

      Instead of this: [iframe src="http://framing.usamls.net/framing/default.asp?f_id=RXS]SSVRSSRVSS]SXR" width="100%" height="500"]

      Square brackets [] makes WordPress go crazy.

  15. Pingback: Nevermind | Ninja Cats

Leave a Reply

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