Skip to content

iFrame

Usage: 

Use to embed content from an external page. Note: Content displayed in iframes is usually not responsive, so a shortcode or provided plugin should be used to display content like Google Maps, Youtube and Vimeo videos when available. The iframe shortcode can be helpful in displaying internal applications such as a Cost Calculator without developing a plugin.

[iframe src="url of content to be embedded" width="100%" height="480"]

Example: 


http://commkit.gsu.edu/files/2013/06/Screen-Shot-2013-06-25-at-2.36.43-PM.png

Attributes:

§  src - source of the iframe 

[iframe src="http://www.youtube.com/embed/A3PDXmYoF5U"] (by default src="http://www.youtube.com/embed/A3PDXmYoF5U");

§  width - width in pixels or in percents 

[iframe width="100%" src="http://www.youtube.com/embed/A3PDXmYoF5U"]
 

Or

 [iframe width="640" src="http://www.youtube.com/embed/A3PDXmYoF5U"] (by default width="100%");

§  height - Height in pixels 

[iframe height="480" src="http://www.youtube.com/embed/A3PDXmYoF5U"] (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);

§  get_params_from_url - allows to add GET params from url to the src of iframe; Example: 

page url - site.com/?prm1=11, shortcode - [iframe src="embed.com" get_params_from_url="1"], iframe src - embed.com?prm1=11 (disabled 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=""]

Feedback and Knowledge Base