Cannot render Iframe in Landscape mode - css

Question

Trying to figure out why this frame http://www.kicks.se/#take-your-pick
Will not render on an Ipad in landscape mode
The css that I can see is
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Any ideas on how this can be expanded to be shown the entire frame? I am going mad looking at it!

Answer 1

Well, it depends if you set your width/height depending on the parent container. The idea to match the parent device's height and width is there in the OP code. But this issue may also depend on browsers AND/OR padding issues. This example represents this technique here.
HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
CSS:
.box {
position: relative;
width: 50%; /* desired width */
}
.box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}