Reduzca un video de YouTube a un ancho receptivo


125

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?


1
Buen recurso para generar su código de inserción receptivo
ThisClark

Respuestas:


268

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.


¡Gracias! Tuve que agregar un ancho: 100% a mi #contenido para asegurarme de que fuera un elemento receptivo.
MattM


1
en mi caso el video no aparece al aplicar este CSS.
basZero

55
la explicación detallada sobre el número 56.25%y 25pxpuede leerse en alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25% : Para crear una relación de 16: 9, debemos dividir 9 entre 16 (0.5625 o 56.25%). padding-top: 25px: Para evitar problemas con el modelo de caja rota (IE5 o IE6 en modo peculiar), utilizamos padding-top en lugar de altura para crear espacio para el cromo.
Tun


26

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>

1
Vale la pena agregar que debe insertarlos dentro de algunos col-sm ... etc. para evitar que el video sea de ancho completo.
amanecer

Esto es increíble
jastr

Además, para mantener el video centrado, no olvide usar el desplazamiento. Por ejemplo:col-sm-8 col-sm-offset-2
Nicolas

9

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

1
Solo una actualización de esto: a veces las viejas imágenes de marcador de posición utilizadas en los videos hacen que parezca que todavía hay bandas negras en la parte superior e inferior, pero los videos en sí se ven bien con esta nueva configuración cuando realmente comienza a reproducirlos. Grrr, gracias YouTube.
McNab

1
Gracias. El uso de padding-bottom: 50% se deshace de la parte superior y las barras negras de fondo para el video que estoy usando, aunque parece que la miniatura y el propio vídeo tienen relaciones de aspecto no coincidentes ...
MSC

8

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


¡Funciona perfectamente! Muchas gracias :)
Laran Evans

Esto ayuda. Especialmente en casos en los que no tiene control sobre los elementos HTML (pero JS) y no puede establecer una envoltura de video. Gracias.
Kai Noack

Tenga en cuenta que esta solución vinculará el evento de cambio de tamaño con una función de JavaScript, lo que puede estresar el navegador a medida que se agregan más eventos. Recuerde que puede usar JavaScript para envolver el iframe en un contenedor contenedor div para permitir que el CSS maneje el estilo receptivo y aumente el rendimiento.
Railgun

He intentado muchas soluciones. Esta es la mejor solución en Internet para hacer que los videos de YouTube respondan.
Dan Nick

1

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

1

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.


Esto funcionó mejor para mí al intentar incrustar un video receptivo, pero especificar un ancho (el ancho máximo).
yougotiger

1

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>

0

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.


-1

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


55
Debido a que esto no cambia el tamaño de la altura correctamente para el video y, por lo tanto, muestra controles y franjas negras, la respuesta aceptada es una mejor solución
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Dado que este es el punto de partida para hacer videos receptivos con iframes incrustados, creo que esta solución responde correctamente la pregunta. Combine esto con un sistema de cuadrícula y la altura es el único problema que queda. => (ancho del contenedor / 12) * 9 = altura.
Tim Vermaelen

-2

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;

}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.