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=""];
Thank you - works great, one quick question, is it possible to display only part of a page?
For instance, displaying only the content contained within a specific div - for example id="specific-id"?
Thanks in advance,
Jas
You're welcome. It is not possible to show part of a page with Iframe.
Hi there,
Thank you for sharing. Doesn't it work for follow buttons, like followgram (used for Instagram).This is the orginal code:
I tried this in text widget on WordPress, doesn't work:
[iframe width="100%" height="480" src="http://followgram.me/ellendircks/widget"]
What am I doing wrong here? Thank you so much.
It works on self-hosted sites, but I don't think it will work on WordPress.com sites.
I think that you cannot install plugins on wp.com and this shortcode requires Iframe plugin to be installed.
Is iframe compatible with wordpress 3.4 or 3.4.1?
Yes, Iframe plugin is compatible with newer version of WordPress. But if you will find some bugs, please, write me back and I will try to help.
Is there a way to have multiple frames on the same page? I set one frame to be 400px high and the other to auto based on document. However both frames take on the same height. I also tried adding id but that did not make a difference.
Try to add different classes to each iframe:
[iframe class="iframeclass1" ...]
[iframe class="iframeclass2" ...]
how do i add scrollbars since the form i have added with your great plugin does not auto scrollbar insert
Try this:
[iframe scrolling="yes" ...]Thanks a lot! this plugin works perfect! :D
Wow - awesome. Did you know that this is a fabulously easy way to add your Amazon store to the site too.
I just didn't understand all the other Amazon astore plugins and all the changes I had to make to code and files, but with this, I just post the src and up it comes, good as new with nothing else to do.
Thank you so much, you saved much such a lot of hassle.
Perhaps someone can assist? I'm having difficulty with height. I have a multi-page form I'm pulling in. The form's content varies from page to page of the embedded form. How can I set the height so it adjusts to the varying height of the embedded content?
I think, it is impossible in your case because javascript cannot access to the height of the content of other page on other domain because of the security reasons.
Is there something that I'm missing with regards to Firefox not displaying the PDF? Works like a charm with Safari and Chrome!
I think, if chrome and safari is showing iframe with pdf and firefox does not, than the problem is in firefox. Can you send me the link to iframe page?
How do you use 'any_other_param' - for some reason wordpress is stripping out the title and byline of my vimeo videos - not text appears at all, so I wondered if these could be added in. I've tried putting the iframe code in with and without your plugin and get the same results.
Try this shortcode:
[iframe width="100%" height="480" src="http://player.vimeo.com/video/3261363?show_title=0&show_byline=0&show_portrait=0&color=77aa20&autoplay=1&loop=0&fullscreen=1"]All params should work fine.
It doesn't matter - through a process of elimination I've discovered that vimeo videos embedded that are smaller than 285px wide don't show any text. So I just have to rethink the layout of my page to accommodate larger videos.
Can I specify region of web page which to show in my iframe? like not the top left but soem 100px lower.
I think, that you can not do this.
But to be more sure you also can google it, maybe someone solved this problem.
Is it possible to have height="100%" please ? Thanks
height="100%" does not work correct in all browsers
so if you will use it, than the height of your iframe will be different in different browsers
Works just like it should. I have this plugin in all my blogs
Is it possoble to use "same height as " so my site header and nav bar don't show in the iframe? So far none of the options work for that, they just cut the iframe in half and still show my header and nav..
I think, it is not possible.
No problem, combined it with a header conditional. Same as content is working great, no more scroll bars!
Hi, is there a way to control the sites for the iframes?
In this case, limit it only to Youtube for security concerns.
There is no options for controlling list of embedded sites in Iframe plugin.
But you may use this shortcode:
[embed_ width="500" height="400"]http://www.youtube.com/watch?v=b8oafdXX_5U[/embed] (remove underscore "_" after first openned embed shortcode)
Embed supports YouTube, Vimeo and more.
Embed shortcode is from WordPress core and does not need any plugin.
how do I embed content from page and not video? your example only covers how to place brackets with vimeo.
Powered by VotingAid.com
you can embed any page, just change src param:
[iframe width="100%" height="480" src=" http://wordpress.org/"]
Hi!
This is great! But, after one week of searching the web for a solution I still cant get it to work. I'm trying to embed a phpBB forum thats not mine, into a WordPress PAGE. The height of the contant change but not the iframe.
I don't want to scroll, no borders, 100% width, and the height set to [iframe same_height_as="content"]
Thanks in advance!
[iframe same_height_as="content"]- auto-height feature, so the height of the iframe will be the same as embedded content (works only with the same domain).Sorry, but there is only one way for you - it is scrolling.
Is there a way to scale the content of the iframe?
I think, that this is not possible
But you can use "same as content" for height. This make the iframe content fit in my page with no scroll bars. however I think it only works in same domain.
My site has 2 iframes on the page, the one below is "same as content" for height. I also removed the header image and main nav bar i(via css) n the 3 templates that are using this iframe.
[iframe 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".