-3

Making a site that loads a random webms in full (browser) screen every time the page is loaded. Problem is I have videos of various sizes (portrait, square, widescreen etc) and don't know how to make them all play without cropping too much.

Basically I want them all to play full screen, portrait video play center screen so it can clearly be seen, square can be stretched as long as its clear etc. Here's the CSS I was given.

html, body {
    margin: 0;
    overflow: hidden;
}

#my-video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

I've also been told to use jquery-3.1.0 but I'm not sure how that works. Thanks!

wavey
  • 3
  • 4

1 Answers1

0

See this CodePen (not mine):

https://codepen.io/dudleystorey/pen/knqyK

The critical CSS:

#video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

You were close, but this should do it for you.

Toby
  • 12,743
  • 8
  • 43
  • 75
  • Works for my square videos but not the portrait ones – wavey Jul 23 '16 at 01:47
  • "works" how? How does it not work for portrait videos? That code is a working version of what you posted - it uses `min-width` and `min-height` to ensure the video doesn't get cropped. I have no idea what your videos or the rest of your code looks like.. – Toby Jul 23 '16 at 01:50