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:

phone screenshot

i appreciate suggestions!


Comments

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

angular - DownloadURL return null in below code -

php - Cannot override Laravel Spark authentication with own implementation -