html5 - HTML Code for 4:3 Video -
i have numerous videos on site 16:9, , code works great screen sizes! need add 4:3 video. though looks on desktop, none of other screen sizes correct. add black top , bottom of video.
here's working code 16:9:
<div class="resizable_block"> <iframe src="http://player.vimeo.com/video/124950765?></iframe> </div> the css:
.resizable_block { width:100%; height:0; padding-bottom:56.25%; position:relative; overflow:hidden;} figure.preloader .fullwidth, .blog.short .preloader .fullwidth, .portfolio_container .preloader .fullwidth, .resize .preloader .fullwidth, .resizable_block .fullwidth { width:100%; height:100%; position:absolute; top:0; left:0;} the code 4:3 not working correctly:
<div class="resizable_block_43"> <iframe src="https://player.vimeo.com/video/229571095?></iframe> </div> the css:
.resizable_block_43 { width:76%; height:0; padding-bottom:56.25%; position:relative; overflow:hidden;} .resizable_block_43 .fullwidth { width:100%; height:100%; position:absolute; top:0; left:0;} here's phone screenshot of issue:
i appreciate suggestions!

Comments
Post a Comment