html5 - Is there any alternative to object-fit:contain? -


i trying put 2 videos in responsive page alternatively. 1 portrait , 1 landscape. object-fit:contain in css looks fine in full desktop screen. when resize page, huge padding top , bottom appears when landscape video put in. should remove , without editing css manually each video?

also have video overlay(canvas) should fit video too, not parent div.

thank you! <3

html

<div id='media-player'>     <canvas id="my-canvas"></canvas>     <video id='media-video' preload="auto">         <source src='media/snatch.mp4.mp4' type='video/mp4'>         <source src='media/snatch.oggtheora.ogv' type='video/webm'>     </video> </div> 

css

#media-player {     height: 100%;     width: 100%;     background-color: #d6d6d6; } video {     height: inherit;     width: inherit;     object-fit:contain; } #my-canvas {     position:absolute !important;     z-index:100000;     margin: 0 auto;     background-color:rgba(68, 170, 213, 0.0);     height:inherit;     width:inherit;     background-color:#0; } 

bit late oh going answer in case runs problem

in order maintain aspect ratio on images or videos can of course use

the

object-fit:contain; 

but object position moves image around gives invisible margin want set 0 example below.

object-fit:contain;   object-position: 0% 0%;  

by default 50% 50% cant see better scaling personal liking wrap image or video in container way can target whole video or image , lets have header underneath video or type of caption example below.

container video{ object-fit:contain; object-position: 0% 0%;} 

this target container holding media file. again if want target image can copy first example. i'll leave link below understand object-fit: enter link description here

object-fit info


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -