hTML5-Video skalieren und Seitenverhältnis aufteilen, um die gesamte Site zu füllen

dies ist ein wirklich alter Thread, ich weiß, und was ich vorschlage, ist nicht unbedingt die Lösung, die Sie suchen, sondern für alle Menschen, die hier landen, weil ich nach dem gesucht habe, was ich gesucht habe: skalieren Sie das Video, um das Video-Containerelement zu füllen , das Verhältnis intakt halten 

Wenn Sie möchten, dass das Video die Größe des Elements <video> ausfüllt, das Video jedoch korrekt skaliert wird, um den Container zu füllen, während das Seitenverhältnis beibehalten wird, können Sie dies mit CSS mit object-fit tun. Ähnlich wie background-size für Hintergrundbilder können Sie Folgendes verwenden:

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

Ich hoffe, das kann einigen Menschen helfen.

BEARBEITEN: funktioniert in den meisten Browsern, aber IE

sie können verwenden:

min-width: 100%;
min-height: 100%;

http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-und-responsive-videos

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-und-audio/

[...] auf dieselbe Weise wie das img-Element: Wenn Sie nur Breite und Höhe festlegen, wird die andere Bemaßung automatisch entsprechend angepasst, sodass das Video sein Seitenverhältnis beibehält. Im Gegensatz zum Element img - , wenn Sie width und height auf etwas setzen, das nicht dem Seitenverhältnis des Videos entspricht, wird das Video nicht gestreckt, um die Box zu füllen. Stattdessen behält das Video das korrekte Seitenverhältnis bei und befindet sich innerhalb des Videoelements. Das Video wird im Videoelement so groß wie möglich dargestellt, wobei das Seitenverhältnis beibehalten wird.

Um dieses Problem in Javascript zu umgehen, vergleiche ich das Verhältnis des Elements zum Quellvideo und wende dann eine CSS-Transformation an: https://Gist.github.com/1219207

Habe dies gestern abgeholt und habe für eine Antwort gerungen. Dies ist in gewisser Weise dem Vorschlag von Jim Jeffers ähnlich, funktioniert aber für die Skalierung von x und y, ist in der JavaScript-Syntax und basiert nur auf jQuery. Es scheint ziemlich gut zu funktionieren:

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth / videoTag.videoHeight,
        tagRatio = $video.width() / $video.height();
    if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

Sie werden auf einige Probleme stoßen, wenn Sie die systemeigenen Steuerelemente verwenden, wie Sie in dieser Geige sehen können: http://jsfiddle.net/MxxAv/

Ich habe einige ungewöhnliche Anforderungen wegen all der Abstraktionsschichten in meinem aktuellen Projekt. Aus diesem Grund verwende ich im Beispiel ein Wrapper-div und skaliere das Video innerhalb des Wrappers auf 100%, um Probleme in einigen der von mir angetroffenen Fälle zu vermeiden.

Was für mich funktioniert hat, ist 

video {
object-fit: fill;
}

Ich benutze dies, um entweder width OR height zu füllen ... (erfordert jQuery) Dieses KEEPS hält das Seitenverhältnis und füllt das div. Ich weiß, die Frage war, das Aspektverhältnis zu brechen, aber es ist nicht notwendig. 

var fillVideo = function(vid){
    var video = $(vid);
    var actualRatio = vid.videoWidth/vid.videoHeight;
    var targetRatio = video.width()/video.height();
    var adjustmentRatio = targetRatio/actualRatio;
    var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio;
    video.css('-webkit-transform','scale(' + scale  + ')');
};

solange für <video> Breite und Höhe auf 100% gesetzt sind und Ihr Container div css overflow:hidden hat, übergeben Sie einfach das Video-Tag.

var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);

Nach einigen Schwierigkeiten kämpfte ich damit. Das Video wird im richtigen Moment automatisch skaliert.

var videoTag = $('video').get(0);
videoTag.addEventListener("loadedmetadata", function(event) {
   videoRatio = videoTag.videoWidth / videoTag.videoHeight;
   targetRatio = $(videoTag).width() / $(videoTag).height();
    if (videoRatio < targetRatio) {
      $(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")");
    } else if (targetRatio < videoRatio) {
      $(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")");
    } else {
      $(videoTag).css("transform", "");
    }
});

Fügen Sie diesen Code einfach in einen $(document).ready()-Block ein.

Getestet auf Chrome 53, Firefox 49, Safari 9, IE 11 (IE skaliert das Video richtig, macht aber vielleicht noch andere lustige Sachen).

Die richtige CSS-Option dafür ist object-fit: contain;

Im folgenden Beispiel wird ein Hintergrundbild über die Breite des Bildschirms gedehnt (während das Seitenverhältnis gebrochen wird) und eine konstante feste Höhe beibehalten.

body {
    background-image:url(/path/to/background.png)
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 346px;
    object-fit: contain;
}

Für ein Video im Kontext des OP wäre das dann:

video#vidtest {
    width: 100%;
    height: 100%;
    object-fit: contain;
}