Wie kann ich die Breite meines Videos in HTML strecken?

Ich versuche, ein Video mit dem Video-HTML-Tag hinzuzufügen.Wie kann ich die Breite meines Videos in HTML strecken?

Dies ist die CSS Ich verwende:

.video { 
width: 100%; 
height: 500px; 
-webkit-transform: scaleX(2); 
-moz-transform: scaleX(2); 
} 
.video:before { 
background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat; 
width:100%; 
min-height:500px; 
}

und dies ist der HTML Ich verwende:

<div class="video"> 
<video width="1366" height="500" autoplay loop muted> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.webm" type="video/webm"> 
</video> 
</div>

ich das Video wollen gestreckt werden (wie es ist), aber es ist Breite ist ein bisschen zu viel, dass es übersteigt. Wie Sie in THIS Bild sehen können, überschreitet die Breite des Videos die Grenzen und fügt daher einen horizontalen Bildlauf hinzu. Ich hatte gehofft, dass jemand mir helfen kann, dieses Breitenproblem von mir zu beheben.

And this is the webpage I'm working on..

Quelle

2017-06-21 VenoM

hat kein Browser die Webkit und moz Präfixe für viele Jahre benötigt. – Rob

Änderungen in HTML und CSS

I Posted Working Snippet folgt.

Arbeits Stift

working pen

.video { 
 
    width: 100%; 
 
    height: 500px; 
 
    position:relative; 
 
    /* -webkit-transform: scaleX(2); */ 
 
    /* -moz-transform: scaleX(2); */ 
 
} 
 
.video:before { 
 
    background: rgba(0,0,0,0.5); /* You can use here image */ 
 
    width:100%; 
 
    height:500px; 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
}

<div class="video"> 
 
    <video width="100%" autoplay loop muted> 
 
<source src="video.mp4" type="video/mp4"> 
 
<source src="video.webm" type="video/webm"> 
 
</video> 
 
</div>

Quelle

2017-06-21 11:23:12 LKG

http: // imgur.com/cZWkQYv War die Hoffnung, es über die Enden zu strecken, möglich? – VenoM

probiere 'width: 100vh;' und 'height: 100vh;' – LKG

check editierte antwort – LKG

Von der Spezifikation für:

Videoinhalt sollte so innerhalb des Elements Wiedergabebereich wiedergegeben werden, dass der Videoinhalt im Wiedergabebereich auf der größten möglichen Größe, die vollständig passt in ihm zentriert gezeigt , wobei das Seitenverhältnis des Videocontents erhalten bleibt. Wenn das Seitenverhältnis des Wiedergabebereichs nicht mit dem Seitenverhältnis des Videos übereinstimmt, wird das Video als Letterbox oder Pillarbox angezeigt. Bereiche des Wiedergabebereichs des Elements, die das Video nicht enthalten, repräsentieren nichts.

Es gibt keine Vorkehrungen zum Strecken des Videos statt Letterboxing. Dies ist wahrscheinlich, weil das Dehnen eine sehr schlechte Benutzererfahrung ergibt und die meiste Zeit nicht beabsichtigt ist. Bilder werden standardmäßig gestreckt, und deshalb sehen Sie viele Bilder, die online stark verzerrt sind, wahrscheinlich aufgrund eines einfachen Fehlers bei der Angabe von Höhe und Breite.

Sie können einen gestreckten Effekt mit CSS 3-Transformationen erzielen, obwohl diese noch nicht vollständig standardisiert oder in allen Browsern implementiert sind und in denen sie implementiert ist, müssen Sie ein Herstellerpräfix wie -webkit- verwenden. oder -moz-. Hier ein Beispiel:

<!DOCTYPE html> 
<style> 
video { 
    -webkit-transform: scaleX(2); 
    -moz-transform: scaleX(2); 
} 
</style> 
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

Quelle

2017-06-21 10:54:27

entfernen Breite und Höhe von html

<div class="video"> 
    <video autoplay loop muted> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
    </video> 
</div>

Und die folgenden CSS wie folgt ändern: `

.video { 

     width: 100%; 
     height: 100%; 
     overflow: hidden; 
     -webkit-transform: scaleX(1); 
     -moz-transform: scaleX(1); 
     } 
     .video:before { 
     background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat; 
     width:100%; 
     min-height:500px; 
     }

Quelle

2017-06-21 11:05:02

So sieht die Webseite jetzt aus: http://imgur.com/JwY8se6 Noch etwas Platz auf der rechten Seite zu bedecken – VenoM

Breite auf 110% ändern oder entsprechend erhöhen .. –

Wie kann ich die Breite meines Videos in HTML strecken?

Antwort

Verwandte Themen