Faire des vidéos de tailles différentes en plein écran?

Question

Faire un site qui charge un webmes aléatoires dans l'écran complet (navigateur) chaque fois que la page est chargée. Le problème est que j'ai des vidéos de différentes tailles (portrait, carré, écran large etc) et je ne sais pas comment les faire toutes jouer sans trop recadrer. Fondamentalement, je veux tous à jouer en plein écran, l'écran du centre de jeu vidéo portrait de sorte qu'il peut être clairement vu, carrés peuvent être étirés aussi longtemps que son clair, etc. Voici le CSS que j'ai reçu.

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

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

J'ai également dit d'utiliser jquery-3.1.0, mais je ne sais pas comment cela fonctionne. Merci!

Answer 1

Voir cette CodePen (pas le mien):

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

Le CSS critique:

#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%); 
} 

Vous étiez proches, mais cela devrait le faire pour vous.