Étirement de la vidéo HTML 5

Question

Pouvez-vous faire une vidéo "étirer" à la largeur et à la hauteur de l'élément vidéo ? Apparemment, par défaut, la vidéo est mise à l'échelle et ajustée à l'intérieur de l'élément vidéo, proportionnellement.

Merci

Answer 1

Cela a parfaitement fonctionné pour moi

http://coding.vdhdesign.co.nz/?p=29

 $VideoElement = $(_VideoElement); //Cache Jquery reference of this
var iOriginalVideoHeight =  _VideoElement.videoHeight;
var iCurrentVideoHeight = $VideoElement.height();
var iVideoContainerHeight = $VideoElement.parent().height();
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;


//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
 $VideoElement.css({
    "transform-origin": "0% 0%",
    "transform":"scaleY(" + iScaleY +")",
    "-ms-transform-origin" : "0% 0% ", /* IE 9 */
    "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
    "-moz-transform-origin" : "0% 0%", /* Firefox */
    "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
    "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
    "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
    "-o-transform-origin":"0% 0%", /* Opera */
    "-o-transform":"scaleY(" + iScaleY +")" /* Opera */
 });

Answer 2

Il existe également la propriété CSS object-fit , qui vous donnera probablement ce dont vous avez besoin.

Incidemment, je pense que cette demande est liée à Comment puis-je faire en sorte que la lecture vidéo HTML 5 s'adapte à l'image au lieu de maintenir le rapport hauteur/largeur ? .