Anzeigen eines YouTube-Videos mit Iframe in voller Seitenbreite [closed]

Lesezeit: 3 Minuten

Benutzer-Avatar
Benutzer2953989

Ich habe ein Video auf meiner Website mit einem eingefügt iframe von YouTube, während die iframe ist volle Breite (100%) ist das Video innerhalb des Rahmens sehr klein (Höhe). Wie passe ich es an die Breite des Containers an?

Code:

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

Siehe Screenshot

Geben Sie hier die Bildbeschreibung ein

  • Mögliches Duplikat von Shrink a YouTube video to responsive width

    – Alon Eitan

    8. Juli 2016 um 15:44 Uhr

  • Sie versuchen, ein Hintergrund- oder nur ein ganzseitiges Video zu erstellen?

    – Felix Fong

    8. Juli 2016 um 15:45 Uhr

  • Bitte zeigen Sie den Code, den Sie verwenden, damit wir Ihnen eine mögliche Lösung anbieten können

    – Artjom Ankudowitsch

    8. Juli 2016 um 15:46 Uhr

  • Eine weitere schnelle Lösung ist die Verwendung transform: scale(2); und gib dem iframe einen niedrigeren Wert z-index

    – RyanWalker

    8. Juli 2018 um 19:51 Uhr

  • Ein Video, das versucht, einen Container mit hohem Z-Index zu überlappen, wird immer noch abgeschnitten, wenn der Container oder seine übergeordneten Elemente einen Überlauf haben: versteckt oder automatisch in seiner Definition. Spüren Sie die Definition auf und überschreiben Sie sie lokal mit overflow: visible oder verwenden Sie den Transformationstrick, um einen neuen Z-Stack zu beginnen.

    – Drachen Lord

    10. September 2021 um 18:05 Uhr

Benutzer-Avatar
Webentwickler Wolf

Um ein YouTube-Video in voller Breite zu erstellen und die Höhe beizubehalten (und es reaktionsfähig zu halten), können Sie das folgende Setup verwenden.

.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%;
}
<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

  • Aus irgendeinem Grund wird das Video nicht in Google Chrome auf Android angezeigt. Irgendeine Idee, was das Problem sein könnte?

    – rraallvv

    5. August 2018 um 10:56 Uhr

  • Quelle hinzufügen: css-tricks.com/NetMag/FluidWidthVideo/…

    – Lajos Mészáros

    8. November 2018 um 10:38 Uhr

  • Warum die Polsterung oben: 25px; ?

    – 6754534367

    8. Mai 2019 um 23:58 Uhr

  • Verwenden Sie nach Möglichkeit https in der YouTube-URL. In meinem Fall würde das Video ohne https nicht in Chrome angezeigt.

    – Francisco González Rull

    7. Juni 2019 um 9:31 Uhr

  • Verwenden Sie www.youtube-nocookie.com, wenn Sie Inhalte von ihnen auf Ihrer Website einbetten.

    – stephenmurdoch

    3. Mai 2020 um 23:49 Uhr

Das Problem ist, dass ein Iframe und ein Video nicht wie ein Bild skaliert werden können, wo es die proportional korrekte Höhe basierend auf dem Seitenverhältnis erhält, wenn Sie die Höhe einfach auf dem Standard belassen.

Eine Lösung dafür besteht darin, die native Breite/Höhe Ihres Videos herauszufinden und ein wenig zu rechnen, um herauszufinden, wie hoch die Höhe bei 100 % Bildschirmbreite sein sollte. Angenommen, es ist 1920 x 1080, können Sie so etwas mit der Viewport-Breite (vw) tun. Sie können den 100vw auf das reduzieren, was besser passt, wenn Sie nicht möchten, dass er buchstäblich den Bildschirm ausfüllt.

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}

  • Vielen Dank! Verwenden height: calc(100vw/1.77777778); um eine zusätzliche schwarze Linie zu entfernen.

    – Thomas Orlita

    13. November 2016 um 20:05 Uhr

Verwenden Sie das Fullscreen-Attribut:

<html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

Wenn es nicht funktioniert hat, fügen Sie auch den folgenden CSS-Code hinzu:

#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;

1226760cookie-checkAnzeigen eines YouTube-Videos mit Iframe in voller Seitenbreite [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy