Reduzca un video de YouTube a un ancho receptivo

Tengo un video de YouTube incrustado en nuestro sitio web y cuando reduzco el tamaño de la pantalla a tableta o teléfono, deja de reducirse a alrededor de 560 píxeles de ancho. ¿Es esto estándar para los videos de YouTube o hay algo que puedo agregar al código para hacerlo más pequeño?

Puede hacer que los videos de YouTube respondan con CSS. Envuelva el iframe en un div con la clase de "videowrapper" y aplique los siguientes estilos:

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

El .videowrapper div debe estar dentro de un elemento sensible. El relleno del .videowrapper es necesario para evitar que el video se colapse. Puede que tenga que ajustar los números dependiendo de su diseño.

Si está utilizando Bootstrap, también puede usar una inserción receptiva. Esto automatizará completamente la capacidad de respuesta de los videos.

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

Hay un código de ejemplo a continuación.

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

Usé el CSS en la respuesta aceptada aquí para mis videos receptivos de YouTube: funcionó muy bien hasta que YouTube actualizó su sistema a principios de agosto de 2015. Los videos en YouTube tienen las mismas dimensiones, pero por cualquier razón, el CSS en la respuesta aceptada ahora buzones todos nuestros videos. Bandas negras en la parte superior e inferior.

He jugado con los tamaños y me decidí a deshacerme del relleno superior y cambiar el relleno inferior a 56.45%. Parece verse bien.

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

Solución única de Javascript refinada para YouTube y Vimeo usando 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();
});

Fácil de usar con solo incrustar:

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

O con un marco de estilo receptivo como 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>

• Se basa en el ancho y la altura del iframe para preservar la relación de aspecto
• Puede usar la relación de aspecto para ancho y alto ( width="16" height="9")
• Espera hasta que el documento esté listo antes de cambiar el tamaño.
• Utiliza el *=selector de subcadena jQuery en lugar del inicio de la cadena^=
• Obtiene el ancho de referencia del video iframe padre en lugar del elemento predefinido
• Solución Javascript
• Sin CSS
• No se necesita envoltura

Gracias a @Dampas por el punto de partida. https://stackoverflow.com/a/33354009/1011746

Este es un hilo viejo, pero he encontrado una nueva respuesta en https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

El problema con la solución anterior es que necesita tener una división especial alrededor del código de video, que no es adecuado para la mayoría de los usos. Así que aquí hay una solución de JavaScript sin div especial.

// 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 solución de @ magi182 es sólida, pero carece de la capacidad de establecer un ancho máximo. Creo que es necesario un ancho máximo de 640 px porque, de lo contrario, la miniatura de YouTube se ve pixelada.

Mi solución con dos envoltorios funciona de maravilla para mí:

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

También configuré el relleno inferior en el envoltorio interno al 50%, porque con el 56% de @ magi182, apareció una barra negra en la parte superior e inferior.

Con créditos a la respuesta anterior https://stackoverflow.com/a/36549068/7149454

Compatible con Boostrap, ajuste el ancho de su contenedor (300 px en este ejemplo) y listo:

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

Vea la esencia completa aquí y viva el ejemplo aquí .

#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);
    }
}

Se llama a resizeHeroVideo solo después de que el reproductor de Youtube se haya cargado completamente (en la carga de la página no funciona), y cada vez que se cambia el tamaño de la ventana del navegador. Cuando se ejecuta, calcula la altura y el ancho del iframe y asigna los valores apropiados manteniendo la relación de aspecto correcta. Esto funciona si la ventana cambia de tamaño horizontal o verticalmente.

Bien, parece grandes soluciones.

¿Por qué no agregar width: 100%;directamente en su iframe? ;)

Entonces su código se vería algo así <iframe style="width: 100%;" ...></iframe>

Pruebe esto, funcionará como funcionó en mi caso.

¡Disfrutar! :)

Hago esto con css simple de la siguiente manera

CÓDIGO HTML

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

CÓDIGO CSS

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

max-width: 100%;
height: auto;

}