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=""];
Great plugin. I have one urgent issue which is that the plugin seems to call jQuery on a non secure way. Since I'm using the plugin for a page with SSL I need to find a way to have the plugin make it's calls using a secure URL. How can I do that? Thanks.
What do you mean about "call jQuery on a non secure way"?
Iframe plugin calls jQuery like this:
wp_enqueue_script('jquery');Ok, so what's happening is that my formerly fully functional SSL page is registering as broken until I turn of the iframe plugin. It then works fine. Of the various calls the page makes, it appears that http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css is the one I can't track down and may be involved. It may not be an iframe plugin issue per se but I can't tell what else it could be since turning off the plugin resolves the issue. I'm happy to send you the URL privately if you'd be willing to take a look....
Hi. I'm trying to embed an astore from Amazon.com into a page. The code looks like
[iframe src="http://astore.amazon.com/smallcontagar-20" frameborder="0" scrolling="no" width="90%" height="4000"][/iframe]The problem I'm having is that I'm not getting the full width of the display. There should be a main element with a sidebar on the right. What can I do to correct this?
The only way you could solve it is sidebars.
[iframe src="http://astore.amazon.com/smallcontagar-20" frameborder="0" scrolling="yes" width="90%" height="4000"]I don't know the ways you could change the content or styles of the page inside of iframe.
Hello,
Love the plugin, it works amazingly. However I have two questions:
1. Is it possible to set the horizontal scrolling to no? Most of the sites I put into the iframe works fine, however some sites overflow horizontally a bit when I set scrolling to yes, is there a way to disable horizontal scrolling?
2. Some sites, when a new link directs to a new page, will result in breaking out of the iframe and loading a new page. Is it possible to force the site in the iframe to load new pages inside it?
Thanks!!
1) There is no ability to set scroll only on one side. Iframe could have scroll on both or none sides.
2) IMHO you cannot control the behavior of links inside of the Iframe because of security reasons. But I recommend you to google it, maybe someone already solved this problem.
Hello,
I love this plugin because it's what I've been looking for in a long time, however today I installed a plugin called Advanced Ajax Page Loader http://wordpress.org/extend/plugins/advanced-ajax-page-loader/
This plugin "ajaxifies" my pages. However however upon installation the plugin breaks the iFrame layouts in Firefox and Internet explorer, resulting in them losing their height=100% properties. Is there a way around this to allow iFrame to work properly in firefox/IE with height=100% but still having Ajax reloader?
Thanks!
IMHO [iframe height="100%"] does not work correct in all browsers and it is not the fault of "Advanced Ajax Page Loader".
Great plugin it works well. I have one issue with our site - new boat page - when viewing on an iphone the frame does not resize and runs off of the screen. Is there anything I can change to correct this.
Thank you.
You should set the width of iframe in percents:
[iframe width="100%" src="..."]If this will not help, than IMHO it is the bug of the browser on iPhone and I don't know how to solve it.
Hey, is there a way to link to an iframe? I have a couple of links on a sidebar that link to an iframe on the main content and I'm not able to do it.
I tried using the id parameter and then target="iframe_id" but it doesn't work.
Thanks!
Nice plugin, thanks! Is there any way to make it work inside the Text/HTML widget?
Add this code:
add_filter('widget_text', 'do_shortcode');to your theme functions.php file and shortcodes will execute in sidebar widgets.
Awesome! I actually added it to the plugin code, so now it works with every theme.
Thanks a lot!!
Trying to embed my ecommerce site into my blog. See http://cheermakeupblog.com/cheer-makeup-store/
I cannot seem to get the width and height set to show the whole webpage on my site. I have tried all the tips that I have found but I think I am missing something.
What shortcode are you using?
Because I can see an error in your shortcode in width and height params.
I have tried may variations. This is the one I have on my page right now
[iframe http://www.prettygirlcosmetics.com width100% height500px]
The website shows up as a small box on my page http://cheermakeupblog.com/cheer-makeup-store/
Any suggestions would be helpful. I am at a lose.
Your shortcode is not good.
Should be like this:
[iframe src="http://www.prettygirlcosmetics.com" width="100%" height="500px"]Yes, I did try that and it still does not work. I tried it yesterday, and could not find why it would not work. Is the admin panel settings somewhere that I am missing?
What plugin to show iframe are you using?
I made this plugin - http://wordpress.org/extend/plugins/iframe/
my nichname - webvitaly
with my plugin should work this shortcode - [iframe src="http://www.prettygirlcosmetics.com" width="100%" height="500px"]
and all other plugins related to iframes should be disabled for avoiding conflicts.
I have one other embed plug in, and I disabled it. That fixed it! There was a conflict! THANK YOU!!
Hi,
You Iframe plug-in is very nice., I have 1 question is it possible to fit in the external site to the borders within my wordpress?
If I tried using the width adjustment as stated in the parameters you showed it will just cut off some part of the page or if to much it will exceed the border. Right now the only option i see is to enable scrolling. Any Idea? Thanks again
Scrolling is the only way to show all content of the external site, because you cannot control styles of the page inside of the iframe.
Yes you are correct. Thank you very much for your plugin. It is a very useful add-in to a website. I was able to adjust the borders of my themes so the iframe will fit exactly. Nice work. Keep it up.
I use iframe like this ; [iframe width="100%" height="480" src="http://mystiforpid.stiforpmovie.com/index/?SOURCE=IndoNetwork"]
but I want the URL "http://mystiforpid.stiforpmovie.com" open in other window when be clicked. How to setting it?
If it is your site, than add
target="_blank"param.If it is not your site, than you cannot change content and behavior of that site via iframe.
I wrote down like this :
G R A T I S !!!
Ikuti petunjuk pengisian seperti dibawah ini :
But still open in Frame not out to New Tab or New Window, please help me, I am not a webmaster.
I mean "=====G R A T I S !!!
Ikuti petunjuk pengisian seperti dibawah ini :====="
I don't understand your question. Could you explain it with details?
Love the plugin. Simple to use, and provides functions other similar programs don't. One quick question: is there a way to disable autoplay? Thanks in advance for any help.
You are welcome.
There is no autoplay parameter in iframe so I suppose you are talking about parameter of Vimeo or some other web-service.
If you are talking about Vimeo, than try to use this shortcode:
[iframe src="http://player.vimeo.com/video/3261363?autoplay=0"]If you are talking about some other web-service, then try to find similar param on their support pages.
Keep this going please, great job!
Even with the default scrolling="no" you can scroll the iframe with the mouse wheel ... how can I fix this problem, so scrolling with the mouse wheel is disabled?
thanks!
best greetings from Germany
I tested all major browsers and could not reproduce this bug.
Which browser (version) and OS (Win, Mac, Linux) are you using?
What site (page src) are you trying to embed?
IMHO it is browser bug and I don't know how to solve it.
Nice plugin I've been looking for. Thanks!
Is there a way to enable [iframe same_height_as="content"] auto height feature for source from different domain?
IMHO it is not possible. You cannot access via javascript to objects on different domain because of security reasons.
But you may also google it and maybe you will find some more info about it.
Hey, I am building a website for a real estate agent. I can't get the iframe to stay on the page, it keeps jumping to realtor.ca. I am using the following code [iframe width="100%" height="480" src="http://www.realtor.ca"].
I think this is made with javascript for preventing to show http://www.realtor.ca site in iframes on other sites.
I think that there is nothing you can do with it.