IFrame adjust according to "height" "width" of the browser - javascript

I want Iframe to adjust according to the screen resolution.
Some auto functionality where i don't need to define height and width manually.
Here is a simple example:
http://plnkr.co/edit/AgRph1fVM1QILkolVEIE?p=preview
<iframe src="http://www.w3schools.com" height="200" width="200">
Please Advice..

You can add an inline style like this.
<iframe src="http://www.w3schools.com" style="position:absolute; width:100%; height: 100%">

Related

How to set other site on canvas in html 5?

i want open google.com in my website like browser , i can set website on canvas ?
or have any way to solve ?
<img id="scream" src="https://www.google.com/" alt="The Scream" width="220" height="277">
You can use iframe tag, like this:
<iframe style="width: 100%; height: 300px; overflow: hidden" src="https://www.google.com/webhp?igu=1"></iframe>

change css dynamically according to size of parent iframe

My partner sites embed my website using an iframe. I recently change my website and it is now longer than what my partner sites have allocated in their iframe (and they have all set scrolling=no.
Given that I can't change my partner sites, I am trying to change my own site now so that everything still works. I noticed that I can add <div style='width:325px;height:400px;overflow:scroll'> as long as width and height is the same as the parent iframe.
Is there a way I can dynamically obtain width and height of parent iframe so that I can apply it onto my own site? Or can I use viewport to determine how big the parent container is?
<iframe srcdoc="
<html><body>
<div style='width:325px;height:400px;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>"
scrolling="no" width=325px height=400px>
</iframe>
You can use viewport width and height: width:100vw height:100vh
Snippet:
<iframe srcdoc="
<html><body>
<div style='width:100vw;height:100vh;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>"
scrolling="no" width=325px height=400px>
</iframe>

How do I make iframes responsive without using div?

I learnt from this post (Making an iframe responsive) that make an iframe responsive by adding a container with a class around the iframe, for instance,
<div class="intrinsic-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>
Is there possible to embed <iframe>...</iframe> directly in my posts (without using <div>...</div>)? And I tried these solutions, but all of them don't work.
PS: I use two columns layout in WordPress. The ratio of video can be 16:9 (from YouTube), 4:3 (from Tencent), etc. Here is a temporary demo.
If you can use viewport units that is doable without an extra wrapper element.
Full page width:
iframe {
width: 100vw;
height: 56.25vw; /*16:9*/
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
Half page width:
iframe {
width: 50vw;
height: 28.125vw; /*16:9*/
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
The key here is the height and width ratio you want to keep. I took the liberty of using jQuery instead of javascript to do this. The code triggers upon clicking the button. It calculates the width and height ratio of the iframe and adapts both to your needs (in this case I assumed you wanted it to fill the containers width).
You'll probably want to loop through all videos if you have multiple on one page and run the code on window resizing and page-loading.
Here is the JSFiddle
Hope it helps :)
html
<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe>
<button id="button" style="float: left">Click me!</button>
jQuery
$(document).ready(function(){
$("button").click(function(){
var ratio = $("#iframe").height() / $("#iframe").width();
$("#iframe").width("100%");
var newWidth = $("#iframe").width();
$("#iframe").width(newWidth);
$("#iframe").height(newWidth*ratio);
$("button").text("resize the window and click me again!");
});
});
Use bootstrap class to make iframe responsive.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" allowfullscreen
src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" >
</iframe>
</div>

IFRAME Fit entire content no scroll bar

Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:
<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>
How can I fit entire content are on my iframe?
Use this in your code, your problem was that it had to be set to position: absolute, otherwise it'll just give you the width and height you need.
<body style="margin: 0 auto;">
<iframe src="some.html" frameborder="0"
style="overflow:hidden;
display:block; position: absolute; height: 100%; width: 100%">
<p style="">
Your browser does not support iframes.
</p>
</body>
add body,html{ height: 100% } to your css, should fix your issue. This assumes that the body tag is your parent. This fiddle might help you out a little - http://jsfiddle.net/8qALc/
Both answers are quite right but there are some flaws. Instead, this should work in any modern browser *:
<style>
/* Unless you use normalizer or some other CSS reset,
you need to set all these properties. */
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; }
</style>
<!--
* frameborder is obsolete in HTML5.
* in HTMl5 height and width properties are set in pixels only.
Nonetheless, there is no need to set these values twice.
* scroll bars should be dictated by the embedded content,
so to avoid double scroll bars, overflow is moved to the html,body tags.
There is a new attribute named seamless that allows the inline frame to
appear as though it is being rendered as part of the containing document,
so no borders and scrollbars will appear.
Unfortunately this is not supported by browsers yet.
-->
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;">
<p>Your browser does not support iframes.</p>
See demo
See seamless property browser compatibility.
*For HTML4 support add these to the iframe: frameborder="0" height="100%" width="100%"

Facebook login button's 1000px iframe causes scrollbar flickering

My webapp uses a
<fb:login-button>
which is XFBML (eXtended Facebook Markup Language) and is rendered to:
<fb:login-button login_text="" class=" fb_iframe_widget" fb-xfbml-state="parsed" fb-iframe-plugin-query="app_id=[my app ID]&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&><span style="vertical-align: top; width: 0px; height: 0px;"><iframe name="f1987cba84" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.facebook.com/plugins/login_button.php?app_id=[my app ID]&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df15dab5c84%26domain%3Dmyapp.com%26origin%3Dhttp%253A%252F%252Fmyapp.com%252Ff1e9e1d5b8%26relation%3Dparent.parent&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&size=xlarge" style="border: none; visibility: hidden;"></iframe></span></fb:login-button>"
For some reason, the button contains a 1000 x 1000 px iframe. Of course, this doesn't actually display as 1000 x 1000 pixels on the webpage, but it's enough to confuse all browsers into temporarily displaying a scrollbar while the button is rendering, on page load.
Is there any way to stop this scrollbar flickering, aside from the hack of hiding the scrollbar in CSS using overflow:hidden and then setting document.body.style.overflow = 'visible'; in Javascript once the button is finished rendering?
If you don't need a 1000 pixel iframe, you can always just specify a different width using CSS.
http://jsfiddle.net/jjordanca/6UEHp/
HTML:
<p>Hi.</p>
<iframe width="1000px" height="300px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.microsoft.com"></iframe>
<p>Bye.</p>
CSS:
iframe {position: relative; width: 500px;}
Notice that the CSS width specification overrides the inline width specification.
Alternatively you could add the following CSS to the parent div (the one with class="fb-like"):
width: 48px; height: 20px; overflow: hidden; text-align: left

Categories

Resources