0

So I got a simple iframe containing a video.
It is responsive but only "horizontally".
To make things clear just take a look at this simple snippet: iFrame Sample

This is the HTML: 

<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item visible-xs" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

And this is the CSS:

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.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;
}
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
    padding-bottom: 75%;
}


If you try to resize the page horizontally, the iframe resizes itself correctly.
But if you try to resize the page vertically it only slides up/down without resizing properly...
How can I solve this annoying problem?

Leon
  • 665
  • 4
  • 10
  • 32
  • try `html, body{ height: 100%; }` if you haven't already – gaynorvader May 24 '17 at 09:11
  • @gaynorvader thanks for the advice but I've already tried it and it doesn't work :( – Leon May 24 '17 at 09:13
  • Ran your code on a local file and it works fine. The only thing is content inside the iframe is not necessarily 100% height. Is this what you mean? If so, is the iframe target on the same domain as the parent page? If not you may run into [Cross-Origin Request Blocking](https://stackoverflow.com/questions/23607901/cross-origin-request-blocked-on) – gaynorvader May 24 '17 at 09:21
  • the target is on a different domain but I've allowed CORS :) – Leon May 24 '17 at 09:28
  • Cool, now you just need to target the css inside the iframe using some js as I'm 99.9% sure the content loaded in via an iframe ignores the css of its parent in all cases. – gaynorvader May 24 '17 at 09:36

0 Answers0