html - Scaling iframe to fit properly -

so using iframe in website display video , put in div allow resizing on mobile sties , make more responsive etc. now, if monitor small, content below iframe cut off.

here code iframe:

<div class="wrapper"> <iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> <style> .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%; } </style> 

if can see may cause behaviour love know.

thanks

---

edit: here code div trying scale. width doesn't change page scaled down , height not change. ideas?

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> 

the issue wrapper div .splash-page .main-wrap set position: absolute; , overflow-y: hidden; doesn't allow div grow fit content.

if change css include this:

.splash-page .main-wrap {   overflow-y: visible;   position: relative; } 

it allow div grow accommodate content.

you wrap whole thing in media query if wanted target specific width.

@media , (min-width: 1001px) {   ... } 

currently you'll have duplicating background issue because using .wsite-background on both div , body tag. if remove class body tag, should better.