Machen Sie video-fit 100% mit jeder Bildschirmauflösung
Habe ich ein video mit den folgenden Eigenschaften, Bildbreite: 1920 Bildhöhe: 1080. Ich brauche seine Breite und Höhe auf 100%, also der Bildschirm wird ganz ausgefüllt. Und es braucht, um zu reagieren, zu. Bisher habe ich diesen code :
<video class="hidden-xs hidden-sm hidden-md hidden-custom videosize embed-responsive-item" autoplay="autoplay" loop="loop">
<source src="~/Videos/myvideo.mp4" type="video/mp4" />
</video>
css:
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100vh;
}
Mit dem code oben passt es perfekt mit einer 1680 x 1050 Auflösung, jedoch mit anderer Auflösung, dauert es bis 100% der Höhe, dann die Breite anpasst, so dass weiße Bereiche auf beiden Seiten.
Irgendeine Idee ? Danke.
- überprüfen Sie fitvids fitvidsjs.com
Du musst angemeldet sein, um einen Kommentar abzugeben.
Eine gute Lösung gefunden hier: http://codepen.io/shshaw/pen/OVGWLG
Also deine CSS wäre:
HTML:
Nun können Sie mit der Objekt-fit-Eigenschaft. Diese Eigenschaft wurde entwickelt, um zu verwalten, ansprechende Größe für
<img>
und<video>
Elemente. Es wird nun unterstützt von allen modernen Browsern.object-fit
Lösung, weil es noch nicht von Microsoft unterstützt Edge (v16.16299)... 🙁object-fit: contain
hast das perfekt.Können Sie ein iframe-Element?
CSS:
HTML:
Ich die Größe der video-Tag und es löste das problem:
HTML: