Ich habe ein Video auf meiner Website mit einer iframe von YouTube, während die iframe ist die volle Breite (100%) das Video ist sehr klein (Höhe) innerhalb des Rahmens. Wie kann ich die Breite des Containers anpassen?Anzeigen eines YouTube-Videos mit iframe in voller Breite der Seite
Code:
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>
Screenshot
Um ein You Tube Video in voller Breite zu machen und erhalten, die Höhe (und halten es als Reaktion) können Sie die folgende Setup verwenden können.
HTML mit Video
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Das Problem ist, dass ein iframe und Video nicht wie ein Bild skaliert werden kann, wo es die proportional richtige Höhe auf dem Seitenverhältnis basiert bekommt wenn Sie nur die Höhe auf der Standardeinstellung belassen.
Eine Lösung für dieses Problem ist es, die native Breite/Höhe Ihres Videos herauszufinden und ein wenig Rechenaufgabe zu machen, um herauszufinden, wie hoch die Höhe bei 100% Bildschirmbreite sein soll. Angenommen, es ist 1920x1080, können Sie etwas wie das Verwenden der Ansichtsfensterbreite (vw) tun. Sie können die 100vw auf was auch immer passt besser reduzieren, wenn Sie nicht wollen, dass es buchstäblich den Bildschirm füllt.
iframe{
width: 100vw
height: calc(100vw/1.77);
}
Danke! Verwenden Sie 'height: calc (100vw/1.77777778);', um eine zusätzliche schwarze Linie zu entfernen. –
Verwenden Sie das Vollbild-Attribut:
<html>
<body>
<iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Wenn es dann nicht auch gehören die folgenden CSS-Code gearbeitet:
#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
Mögliche Duplikat [Shrink ein YouTube-Video zu reaktions Breite] (http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) –
Sie versuchen, Hintergrund oder nur ganzseitige Video zu machen? –
Bitte zeigen Sie Code, den Sie verwenden, damit wir Ihnen eine mögliche Lösung geben können –