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
Post a Comment