Can anyone tell me why this isn't responsive? - html

Question

working on a site and this animation isn't responsive. I've changed the width to 100% and added css. Can anyone help me out? here's the site link..
armani.globerunnerstaging.com
Here's my html and css
<div class="video-container">
<iframesrc="https://content.understand.com/hair-loss-dallas.player?PresentationID=4e9e3cad-0f79-49c0-a204-8193a6a4264b&CatalogID=3fcc6564-3065-4b92-a116-8a692f3572d5" width="100%" height="557" frameborder="0" scrolling="no">
</iframe>
</div>
.video-container {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch;
border: solid black 1px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer 1

First thing, an iFrame can't have a percentage unit for the width attribute :
width="100%" height="557" frameborder="0"
It should be pixels. For example:
width="701" or width="701px"
But your main problem is that player displaying within your iFrame has a container with a fixed width of 701px.
div#container
{
background: #FFF;
margin: 0 auto;
padding: 0;
width: 701px;
height: 557px;
}
This means even if your iFrame has a smaller width than 701px, its content won't shrink below that limit.
Unless you can edit the CSS of the page inside the iFrame, there is no way to change this behaviour.
UPDATE:
Maybe if you try playing around with CSS Scale transform you could make it work for mobile.
.video-container iframe{
-ms-transform-origin: 0 0; /* IE 9 */
-webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
transform-origin: 0 0;
-ms-transform: scale(0.75); /* IE 9 */
-webkit-transform: scale(0.75); /* Safari */
transform: scale(0.75);
}
Make sure you correct the iframe property width:"100%" first.
Here is an example : http://codepen.io/Rubecula/pen/CtKdH