0
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 <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>
No es adaptativo ni Responsive Design
<video width="100%" ... ></video>video {
width: 100% !important;
height: auto !important;
}
Usando video HTML5, el fluido es fácil. NOTA: El video de ejemplo es solo H.264, no en los formatos de tres ish, debe ser visible en todos los navegadores modernos.<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.
Al iframe anterior le falta su atributo de altura. Si bien es 100% de ancho, su altura es muy baja.
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%;
}
Cualquiera que sea el código de incrustación de iframe de YouTube que pegue dentro de .videoWrapper, lo verá presentado en un cuadro fluido de 16: 9.
Pero, pero ... relaciones de aspecto, contenido heredado, s no tecnológicos, etc.
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 s 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.
<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']"),
Actualizar nuestro script para tratar con Vimeo no es nada.
<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%;
}var $allVideos = $("object, embed"),$(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.
Comentarios