Menu
how do I make an iframe 100% width and height of the window?
253
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio. Enjoy.
In the HTML, put the player <iframe> in a <div> container. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.
this code probable help you .
<iframe src="" onload="this.width=screen.width;this.height=screen.height;"> Answering this just in case if someone else like me stumbles upon this post among many that advise use of JavaScripts for changing iframe height to 100%.
I strongly recommend that you see and try this option specified at How do you give iframe 100% height before resorting to a JavaScript based option. The referenced solution works perfectly for me in all of the testing I have done so far. Hope this helps someone.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
