Riduci un video di YouTube alla larghezza reattiva

Ho un video di YouTube incorporato nel nostro sito Web e quando restringo lo schermo per tablet o dimensioni del telefono smette di ridursi a circa 560 px di larghezza. È questo standard per i video di YouTube o c'è qualcosa che posso aggiungere al codice per ridurlo?

Puoi rendere i video di YouTube reattivi con i CSS. Avvolgi l'iframe in un div con la classe di "videowrapper" e applica i seguenti stili:

.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%;
}

Il div .videowrapper dovrebbe essere all'interno di un elemento reattivo. L'imbottitura su .videowrapper è necessaria per impedire il collasso del video. Potrebbe essere necessario modificare i numeri in base al layout.

Se stai usando Bootstrap puoi anche usare un embed reattivo. Ciò automatizzerà completamente la risposta dei video.

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

Di seguito è riportato un esempio di codice.

<!-- 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>

Ho usato il CSS nella risposta accettata qui per i miei video YouTube reattivi - ha funzionato perfettamente fino a quando YouTube non ha aggiornato il loro sistema all'inizio di agosto 2015. I video su YouTube hanno le stesse dimensioni ma per qualsiasi motivo il CSS nella risposta accettata ora letterbox tutti i nostri video. Fasce nere in alto e in basso.

Ho fatto il giro con le dimensioni e ho deciso di sbarazzarmi dell'imbottitura superiore e di cambiare l'imbottitura inferiore in 56.45%. Sembra avere un bell'aspetto.

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

Raffinata soluzione Javascript unica per YouTube e Vimeo utilizzando 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();
});

Semplice da usare con solo incorporare:

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

O con un framework di stile reattivo come 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>

• Si basa su larghezza e altezza dell'iframe per preservare le proporzioni
• Può usare le proporzioni per larghezza e altezza ( width="16" height="9")
• Attende che il documento sia pronto prima di ridimensionare
• Utilizza il *=selettore di sottostringa jQuery anziché l'inizio della stringa^=
• Ottiene la larghezza di riferimento dal genitore iframe video anziché dall'elemento predefinito
• Soluzione Javascript
• Nessun CSS
• Nessun involucro necessario

Grazie a @Dampas per il punto di partenza. https://stackoverflow.com/a/33354009/1011746

Questo è il vecchio thread, ma ho trovato una nuova risposta su https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Il problema con la soluzione precedente è che è necessario disporre di div speciali attorno al codice video, che non è adatto per la maggior parte degli usi. Quindi ecco la soluzione JavaScript senza div speciali.

// 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

La soluzione di @ magi182 è solida, ma non ha la possibilità di impostare una larghezza massima. Penso che sia necessaria una larghezza massima di 640 px perché altrimenti la miniatura di YouTube sembra pixelata.

La mia soluzione con due wrapper funziona come un incantesimo per me:

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

Ho anche impostato il fondo dell'imbottitura nell'involucro interno al 50%, perché con il 56% di @ magi182 è apparsa una barra nera in alto e in basso.

Con crediti alla risposta precedente https://stackoverflow.com/a/36549068/7149454

Compatibile con Boostrap, adatta la larghezza del tuo contenitore (300px in questo esempio) e sei a posto:

<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>

Guarda l'essenza completa qui e vivi l'esempio qui .

#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 viene chiamato solo dopo il caricamento completo del lettore Youtube (il caricamento della pagina non funziona) e ogni volta che la finestra del browser viene ridimensionata. Quando viene eseguito, calcola l'altezza e la larghezza dell'iframe e assegna i valori appropriati mantenendo le proporzioni corrette. Funziona indipendentemente dal ridimensionamento della finestra in orizzontale o in verticale.

Va bene, sembra grandi soluzioni.

Perché non aggiungere width: 100%;direttamente nel tuo iframe. ;)

Quindi il tuo codice sarebbe simile <iframe style="width: 100%;" ...></iframe>

Prova questo funzionerà come ha funzionato nel mio caso.

Godere! :)

Lo faccio con un semplice CSS come segue

CODICE HTML

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

CODICE CSS

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

max-width: 100%;
height: auto;

}