If you place an HD video in a full width row on a site that has a header, and you look at the site on an HD monitor with the browser taking up the full monitor (with or without fullscreen) then an obvious problem happens: you cut off the top or bottom of the video because the video is using the max width (in this case 1920) but the 1080 height is partially cut off by the header.
I can make the video narrower, but then if someone has a larger screen, then obviously they’ll miss out on the full width experience.
I’ve played with vmin vmax and other css attributes but I can’t seem to win.
So… how could I set the video to – when the viewport is too short in height/width ratio – fit into the available real estate?
Thanks so much.
PS. And, of course, I need to be able to center/middle it in the row