html - can't resize containers with youtube and responsive -


http://m.mits.remax.ca/ above link, there's huge gap between youtube , header. tried looking everywhere , still couldn't find went wrong.

at first, used regular youtube iframe , centered video found out it's not responsive way found online css , added worked fine tried making video 75% instead of 100% 75% gap happened.

can give me hand please?

the css found , used is

.video-container {         position: relative;         padding-bottom: 56.25%;         padding-top: 25px;         height: 0;     }      .video-container iframe,     .video-container object,     .video-container embed {         position: absolute;         top: 0;         left: 12.5%;         width: 75%!important;         height: 75%!important;     } 

height: 75%; in video causing huge gap between video , header. can adjust that, e.g: 100%. if want adjust height, don't set video height 75% set padding-bottom on .video-container.

edit

i tried this:

.video-container {   padding-bottom: 37.25%;   margin-bottom: 30px; } .video-container iframe {   height: 100% !important; } 

and http://take.ms/zh8eq let me know if you're looking for.

what css looks after applying yours in

.video-container {    position: relative;    padding-bottom: 37.25%;    padding-top: 25px;    height: 0;    margin-bottom: 30px; } .video-container iframe, .video-container object, .video-container embed {   position: absolute;   top: 0;   left: 12.5%;   width: 75%!important;   height: 100%!important; } 

Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -