Estilo para video de ancho de fluido

En el diseño web receptivos, adaptativo o Responsive Design y fluidos, el elemento Media type, en español es un tipo de medio (anteriormente conocido como tipo MIME ) que es un identificador de dos partes para formatos de archivo y contenidos de formato transmitidos en Internet. Este ultimo es el que se interpone en el camino de la armonía perfecta: el video.
Hay muchas formas en que se puede mostrar el video en su sitio. Es posible que sea el anfitrión del video y lo presente a través de la etiqueta <video> de HTML5 . Es posible que esté utilizando YouTube o Vimeo, que proporciona el código <iframe>para mostrar videos. Es posible que esté utilizando Viddler o Blip.tv que proporcionan etiquetas de object/embed anidadas para mostrar un reproductor Flash. En cada uno de estos escenarios, es muy común que se declare un ancho y una altura estáticos.

<video width="400" height="338"... ></video>

<iframe width="400" height="338" ... ></iframe>

<object width="400" height="338"...></object>
      <embed width="400" height="338"... ></embed>

Declarar anchos estáticos no es una buena idea en entornos de ancho fluido, receptivos, adaptativo o Responsive Design. ¿Qué sucede si el contenedor principal para ese video se reduce más estrecho que el 400px declarado? Aparecerá y probablemente se vea ridículo y vergonzoso.Entonces, ¿no podemos hacer esto?

<video width="100%" ...  ></video>

Bueno, sí puedes. Si está utilizando video HTML5 estándar, eso hará que el video se ajuste al ancho del contenedor. Es importante que elimines la declaración de altura cuando hagas esto, para que la relación de aspecto del video se mantenga a medida que crece y se reduce, para que no obtengas "barras" incómodas para llenar el espacio vacío (a diferencia de las imágenes, el video real mantiene que es relación de aspecto independientemente del tamaño del elemento). Puede llegar a través de CSS (y no preocuparse por lo que se declara en el HTML) de esta manera:

video {
  width: 100%    !important;
  height: auto   !important;
}

<iframe> Video (YouTube, Vimeo, etc.)

Nuestro pequeño truco de 100% de ancho no nos va a ayudar cuando se trata de video que se entrega a través de iframe como es el caso de Youtube. Se requiere establecer una altura, de lo contrario, los navegadores mostrarán el iframe a una altura estática de 150px, que es demasiado bajo para la mayoría de los videos.
Afortunadamente, hay un par de posibles soluciones aquí. Uno de ellos fue pionero de Thierry Koblentz y se presentó en A List Apart en 2009: Creación de relaciones intrínsecas para video. Con esta técnica, envuelve el video en otro elemento que tiene una relación de aspecto intrínseca, luego coloca el video dentro de eso. Eso nos da un ancho de fluido con una altura razonable con la que podemos contar.

<div class="videoWrapper">
<!-- Copiar y pegar video de YouTube -->
<iframe width="560" height="349" src="hhttps://www.youtube.com/embed/x5Q1ts0dlVI" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

La técnica anterior es impresionante, pero tiene varias limitaciones posibles:

• Requiere un elemento envoltorio, por lo que solo sale el código de copiar y pegar directamente de YouTube. Los usuarios deberán ser un poco más listos.
• Si tiene contenido heredado y está rediseñando para que sea fluido, todos los videos antiguos necesitan ajustes de HTML.
• Todos los videos deben tener la misma relación de aspecto. De lo contrario, se verán obligados a una relación de aspecto diferente y obtendrá las "barras". O bien, necesitará una caja de herramientas de nombres de clase que puede aplicar para ajustarla, lo cual es una complicación adicional.

Si alguna de estas limitaciones se aplica a usted, puede considerar una solución de jаvascript. Imagínese esto: cuando se carga la página, se miran todos los videos y se guarda su relación de aspecto. Una vez de inmediato, y cada vez que se cambia el tamaño de la ventana, todos los videos cambian de tamaño para llenar el ancho disponible y mantener su relación de aspecto. Usando la biblioteca jQuery jаvascript, se ve así:

<script type="text/jаvascript">
// Encuentra todos los videos de YouTube
var $allVideos = $("iframe[src^='//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();
</script>

Ahora le toca a Vimeo

Vimeo también usa iframes, por lo que lo que funciona para YouTube funcionará para Vimeo. La técnica HTML/CSS no necesita ninguna modificación en absoluto, y la solución jQuery podría repararse cambiando una sola línea:

// Encuentra todos los videos de YouTube
var $allVideos = $("iframe[src^='//www.youtube.com']"),

Por esto:

// Encuentra todos los videos de YouTube
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),

<object> / <embed> Video (Viddler, Blip.tv, etc.)

Algunas incrustaciones de video caseras, así como servicios para compartir videos como Viddler y Blip.tv, usan objetos anidados de la vieja escuela e incrustan etiquetas. YouTube también lo hizo hasta hace relativamente poco. Es de la vieja escuela y no es estándar, pero esta técnica fue muy utilizada porque Flash estaba en todas partes y simplemente funcionó.

Object/embed tiene el mismo problema que los iframes, el ancho y la altura son necesarios para que no se obtengan resultados.

Para una solución HTML/CSS, podemos buscar nuevamente la solución de Thierry si estamos de acuerdo con agregar HTML adicional e imponer una relación de aspecto.

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper object,
.videoWrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Si no queremos molestarnos con el envoltorio HTML adicional y las complicaciones CSS, nuevamente podríamos confiar en jаvascript. Nuestro script puede seguir siendo el mismo, excepto que vamos a buscar elementos de objetos e incrustados en lugar de elementos de video o iframe.

var $allVideos = $("object, embed"),

Y es importante tener en cuenta: jQuery no permite el uso de su función .data () en ese tipo de elementos, por lo que necesitaremos usar los atributos de datos HTML5 para almacenar y recuperar nuestros datos de relación de aspecto.

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

   ...

$el
   .width(newWidth)
   .height(newWidth * $el.attr('data-aspectRatio'));

Conclusión

Digamos que estamos en una posición en la que tenemos mucho contenido heredado, que incluye videos de todas las marcas y modelos, y estamos rediseñando nuestro sitio para que sea fluido. La ruta más eficiente será combinar todo lo que hemos aprendido en este tutorial y construir nuestros videos con el que mejor se adapte a nuestra necesidades.