Menu
In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css. Follow these simple steps: Get the iframe embed code and paste in into your HTML page. Set the height and the width attributes of the iframe tag to 100%
The 3 steps to create a responsive iframe that keeps its aspect ratio: Create the aspect ratio box. Add a container for the iframe, determine the aspect ratio percentage, hide the overflow, and set its position to relative. Position the iframe.
given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
You will need to wrap the responsive youtube embed code with a div and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically. Awesome!
I present to you The Incredible Singing Cat solution =)
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
As you move the window bar, you'll see iframe to responsively resize
Alternatively, you may also use the intrinsic ratio technique
.iframe-container {
overflow: hidden;
padding-top: 56.25%; /* 16:9 */
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
Try using this code to make it responsive
iframe, object, embed {
max-width: 100%;
}
I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="myIframe">
<iframe> </iframe>
</div>You can use this tricks mentioned on this site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php.
Its very useful and easy to understand. All you need to create
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>Here is your edited js fiddle for demonstration.
Check out this solution. It works for me
https://jsfiddle.net/y49jpdns/
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
font-family: arial;
font-size: 10px;
color: #6e6e6e;
background-color: #000;
}
#preview-frame {
width: 100%;
background-color: #fff;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
</iframe>
</body>
</html>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