html - How to create a centered <div> which automatically shrinks if it doesn't fit within the viewport? -
i'd have html5 video box both vertically , horizontally centered within <div> fixed width. tricky thing is, want video shrink fit inside viewport, when viewport in either height or width smaller video.
and of course accomplish resizing without javascript. fine, if older browsers fail resizing.
i found quite nice solution (see code below). have quite bad feeling it, because webkit-based browsers have other understanding of css ie 11, 10 & 9 (while firefox here above both)
to achieve desired result set max-width of video , outer container (#parent) 100%.
however not work internet explorer 11, 10 & 9. looks ie interpreting #parent video {max-width:100%} 100% of video , not of containing block. result video juts out of it's container , not resize. ie behaving fine if set #parent video {width:100%}.
the webkit-based browsers (safari, chrome, new opera) on other hand need #parent video {width:auto}. otherwise behave not nice, if small vertical size of view-port wants video shrink. (in example see blue background, should covered video.)
so questions are:
- what standard say: webkit or ie right? or firefox , edge right, fine either (or both) max-width and/or width set 100%?
- is code & goal maybe out of that, possible css , works chance?
- do know better solution accomplish self-shrinking video?
here "solution":
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge" > <script type="text/javascript"> document.documentelement.setattribute('data-useragent', navigator.useragent); </script> <style> #parent{ position: fixed; left: 20px; top: 0; height: 100%; width: 600px; max-width: 100%; max-width: calc(100% - 40px); background-color: gray; display: flex; align-items: center; justify-content:center; } #parent > div { position: relative; border: 10px solid white; background-color:blue; margin: 30px; } #parent video { display: block; object-fit: contain; max-height: calc(100vh - 80px); max-width: 100%; width: 100%; /* needed ie , older browsers (e.g. firefox 21) */ } @supports(display:flex){ /* newer browser (but not ie 11 & ie 10, have flex not @supports) */ #parent video { width: auto; /* needed chrome, safari , new opera (while firefox , edge fine width:100%) */ } } #parent div#close { position: absolute; right: -17px; top: -17px; width: 20px; height: 20px; border: 1px solid gray; border-radius: 100%; background-color: white; } /* additional styling older browsers not supporting flexbox */ #parent { text-align:center; white-space:nowrap; } #parent::after { display:inline-block; vertical-align:middle; content:" "; height:100%; width:0; } #parent > div { display:inline-block; vertical-align:middle; } html[data-useragent*='presto'] #parent, html[data-useragent*='msie 10.0'] #parent { display:block; /* ie10 , old opera have broken flexbox implementation */ } </style> </head> <body> <div id="parent"> <div id="inner"> <video controls> <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/> <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"/> </video> <div id="close">x<div> </div> </div> </body> </html> here fiddle https://jsfiddle.net/6vu42zxr
what understood having css issue ie , webkit browsers. why dont right separate css ie browser? target ie browser. have separate css ie , chrome , other browsers.
target versions of ie css:
<!--[if ie]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target except ie browser:
<!--[if !ie]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]--> target ie 7 browser:
<!--[if ie 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> target ie 6 browser:
<!--[if ie 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> target ie 8 , lower browser:
<!--[if lt ie 9]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]--> why use conditional stylesheets?
- keep code hack-free , valid.
- keep main stylesheet clean.
- easy edit ie css , maintain.
- and remember, these conditional tags use load javascript, or related ie browser.
Comments
Post a Comment