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