YouTube-Video auf responsive Breite verkleinern

Question

Ich habe ein YouTube-Video auf unserer Website eingebettet und wenn ich den Bildschirm auf Tablet- oder Handy-Größe verkleinere, hört das Video bei einer Breite von etwa 560px auf zu schrumpfen. Ist das standardmäßig für YouTube-Videos so oder gibt es etwas, das ich dem Code hinzufügen kann, um es kleiner zu machen?

Answer 1

Die Lösung von @magi182 ist solide, aber es fehlt die Möglichkeit, eine maximale Breite festzulegen. Ich denke, eine maximale Breite von 640px ist notwendig, da sonst das Youtube-Vorschaubild pixeliert aussieht.

Meine Lösung mit zwei Wrappern funktioniert einwandfrei für mich:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Ich habe auch den padding-bottom im inneren Wrapper auf 50 % gesetzt, da bei @magi182's 56 % eine schwarze Leiste oben und unten erschien.

Answer 2

Dies ist ein alter Thread, aber ich habe eine neue Antwort auf https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php gefunden.

Das Problem mit der vorherigen Lösung ist, dass Sie einen speziellen div-Container um den Video-Code haben müssen, was für die meisten Anwendungen nicht geeignet ist. Hier ist also eine JavaScript-Lösung ohne speziellen div-Container.

// Finden aller YouTube Videos - VIDEOS GRÖßENÄNDERUNG!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// Das Element, das eine flexible Breite hat
$fluidEl = $("body");

// Seitenverhältnis für jedes Video berechnen und speichern
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // und die fest codierte Breite/Höhe entfernen
    .removeAttr('height')
    .removeAttr('width');

});

// Bei Größenänderung des Fensters
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Alle Videos entsprechend ihres eigenen Seitenverhältnisses ändern
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Beim Laden der Seite einmal die Größenänderung starten, um alle Videos anzupassen
}).resize();

// ENDE VIDEOS GRÖßENÄNDERUNG

Answer 3

Wenn Sie Bootstrap 5.0 verwenden, können Sie .ratio verwenden

https://getbootstrap.com/docs/5.0/helpers/ratio/

Beispiel

Answer 4

Mit Dank an die vorherige Antwort https://stackoverflow.com/a/36549068/7149454

Boostrap kompatibel, passen Sie die Breite Ihres Containers an (300px in diesem Beispiel) und Sie sind startklar:

Answer 5

Okay, sieht nach großen Lösungen aus.

Warum fügst du nicht width: 100%; direkt in dein iframe ein. ;)

Also würde dein Code etwas wie aussehen

Probier es aus, es wird funktionieren, wie es in meinem Fall funktioniert hat.

Viel Spaß! :)