WordPress: Adding iFrame and Embed Codes using the iFrame Plugin

The WordPress iFrame plugin allows users to add iframe and embed codes directly in the visual editor. In addition, it allows for switching between the visual and text editors without stripping the code. This plugin is already activated on all web.unc.edu and sites.unc.edu websites.

All iframe and embed codes need to be modified to shortcodes in order to be added to a web.unc.edu page or post. For example:

<iframe width="560" height="315" src="//www.youtube.com/embed/1gQ7tVlMruo" frameborder="0" allowfullscreen></iframe>

Should be changed to a shortcode (be sure to remove the </iframe> closing tag)

[iframe width="560" height="315" src="//www.youtube.com/embed/1gQ7tVlMruo" frameborder="0" allowfullscreen]

Iframe shortcode is the replacement of the iframe html tag and accepts the same parameters (see the list of available parameters below) as iframe html tag. You may use the iframe shortcode to embed content from YouTube, Vimeo, Google Maps or from any external page.

iFrame Parameters:

  • src – source of the iframe
    [iframe src="http://www.youtube.com/embed/1gQ7tVlMruo"]
  • width – width in pixels or in percents
    [iframe width="100%"] or
    [iframe width="640"] (by default width=”100%”);
  • height – height in pixels
    [iframe height="480"] (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] (by default);
  • 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. This 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=""]