Verkleinern Sie ein YouTube-Video auf die Reaktionsbreite

Auf unserer Website ist ein YouTube-Video eingebettet. Wenn ich den Bildschirm auf Tablet- oder Telefongrößen verkleinere, wird er bei einer Breite von etwa 560 Pixel nicht mehr verkleinert. Ist dies der Standard für YouTube-Videos oder kann ich dem Code etwas hinzufügen, um ihn zu verkleinern?

Sie können YouTube-Videos mit CSS ansprechen. Wickeln Sie den Iframe in ein Div mit der Klasse "Videowrapper" und wenden Sie die folgenden Stile an:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das .videowrapper div sollte sich in einem responsiven Element befinden. Das Auffüllen des .videowrappers ist erforderlich, damit das Video nicht zusammenfällt. Je nach Layout müssen Sie möglicherweise die Zahlen anpassen.

Wenn Sie Bootstrap verwenden, können Sie auch eine responsive Einbettung verwenden. Dadurch wird die Reaktion der Videos vollständig automatisiert.

http://getbootstrap.com/components/#responsive-embed

Unten finden Sie einen Beispielcode.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Ich habe das CSS in der akzeptierten Antwort hier für meine reaktionsschnellen YouTube-Videos verwendet - es hat hervorragend funktioniert, bis YouTube Anfang August 2015 sein System aktualisiert hat. Die Videos auf YouTube haben die gleichen Dimensionen, aber aus welchem ​​Grund auch immer das CSS in der akzeptierten Antwort jetzt Briefkästen alle unsere Videos. Schwarze Bänder oben und unten.

Ich habe mit den Größen herumgekitzelt und mich entschlossen, die obere Polsterung loszuwerden und die untere Polsterung auf zu ändern 56.45%. Scheint gut auszusehen.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

Überarbeitete Javascript-Lösung nur für YouTube und Vimeo mit jQuery.

// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Kick off one resize to fix all videos on page load
  }).resize();
});

Einfach zu bedienen mit nur einbetten:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

Oder mit einem Responsive Style Framework wie Bootstrap.

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

• Verlässt sich auf die Breite und Höhe des Iframes, um das Seitenverhältnis beizubehalten
• Kann das Seitenverhältnis für Breite und Höhe verwenden ( width="16" height="9")
• Wartet, bis das Dokument fertig ist, bevor die Größe geändert wird
• Verwendet den jQuery-Teilstring- *=Selektor anstelle des Zeichenfolgenanfangs^=
• Ruft die Referenzbreite vom übergeordneten Video-Iframe-Element anstelle des vordefinierten Elements ab
• Javascript-Lösung
• Kein CSS
• Kein Wrapper erforderlich

Vielen Dank an @Dampas für den Ausgangspunkt. https://stackoverflow.com/a/33354009/1011746

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 besteht darin, dass Sie einen speziellen Div-Around-Videocode benötigen, der für die meisten Anwendungen nicht geeignet ist. Hier ist also eine JavaScript-Lösung ohne spezielle Div.

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

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

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

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

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS

Die Lösung von @ magi182 ist solide, es fehlt jedoch die Möglichkeit, eine maximale Breite festzulegen. Ich denke, eine maximale Breite von 640px ist notwendig, da das YouTube-Miniaturbild ansonsten pixelig aussieht.

Meine Lösung mit zwei Wrappern wirkt für mich wie ein Zauber:

.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%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Ich habe auch den Polsterboden in der inneren Hülle auf 50% eingestellt, da bei 56% von @ magi182 oben und unten ein schwarzer Balken angezeigt wurde.

Mit Credits zur vorherigen Antwort https://stackoverflow.com/a/36549068/7149454

Boostrap-kompatibel, passen Sie Ihre Containerbreite an (in diesem Beispiel 300px) und los geht's:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>

Das Ganze finden Sie hier und Live-Beispiel .

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

resizeHeroVideo wird erst aufgerufen, nachdem der Youtube-Player vollständig geladen wurde (das Laden der Seite funktioniert nicht) und wenn die Größe des Browserfensters geändert wird. Wenn es ausgeführt wird, berechnet es die Höhe und Breite des Iframes und weist die entsprechenden Werte zu, wobei das richtige Seitenverhältnis beibehalten wird. Dies funktioniert unabhängig davon, ob die Fenstergröße horizontal oder vertikal geändert wird.

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

Warum nicht hinzufügen? width: 100%; direkt in Ihren Iframe einfügen? ;)

Ihr Code würde also ungefähr so ​​aussehen <iframe style="width: 100%;" ...></iframe>

Versuchen Sie dies, es wird so funktionieren, wie es in meinem Fall funktioniert hat.

Genießen! :) :)

Ich mache das mit einfachem CSS wie folgt

HTML QUELLTEXT

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

CSS-CODE

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}