wake-up-neo.com

Verkleinern Sie ein YouTube-Video auf die Reaktionsbreite

Auf unserer Website ist ein YouTube-Video eingebettet. Wenn ich den Bildschirm auf Tablets oder Handys verkleinere, wird er bei einer Breite von ca. 560px nicht mehr kleiner. Gibt es diesen Standard für YouTube-Videos oder kann ich dem Code etwas hinzufügen, damit er kleiner wird?

117
MattM

Sie können YouTube-Videos mit CSS ansprechend gestalten. Wickle den iframe in ein div mit der Klasse "videowrapper" und wende 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.

259
magi182

Wenn Sie Bootstrap verwenden, können Sie auch ein responsives Embed verwenden. Dadurch wird das Ansprechen der Videos vollständig automatisiert.

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

Unten ist ein 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>
26
illage4

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

Ich habe mit den Größen getickt und mich entschlossen, die obere Polsterung zu entfernen und die untere Polsterung in 56.45% Zu ändern. Scheint gut auszusehen.

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

Verbesserte Javascript-Only-Lösung 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 responsiven 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 von Stringanfang ^=
  • Ruft die Referenzbreite vom übergeordneten iframe-Video statt vom vordefinierten Element ab
  • Javascript-Lösung
  • Kein CSS
  • Kein Wrapper benötigt

Danke an @Dampas für den Startpunkt. https://stackoverflow.com/a/33354009/1011746

7
mindriot

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

Das Problem mit der vorherigen Lösung besteht darin, dass Sie einen speziellen Div-Around-Videocode benötigen, der für die meisten Verwendungszwecke nicht geeignet ist. Also hier ist 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
1
Dampas

Die Lösung von @ magi182 ist solide, es fehlt jedoch die Möglichkeit, eine maximale Breite festzulegen. Ich halte eine maximale Breite von 640px für erforderlich, da sonst das YouTube-Vorschaubild 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 die Füllhöhe in der inneren Hülle auf 50% eingestellt, da bei 56% von @ magi182 oben und unten ein schwarzer Balken angezeigt wurde.

1
Pascal Klein

Siehe vollständige Zusammenfassung hier und Live-Beispiel hier .

#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 nur 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.

0
davidcondrey

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

Boostrap-kompatibel, passen Sie Ihre Containerbreite an (300px in diesem Beispiel) 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>
0
Nick Kovalsky