Todo lo que tu página web necesita

Hacer responsive un vídeo de YouTube

Video elastico
El mejor creador web

Ahora sabrás como hacer que los vídeos de YouTube o Vimeo sean responsive en una web o blog, para que así no se perjudique su visualización desde un movil.

Hacer responsive un video de YouTube

Es obvio que cada vez son mas las personas que aprecian las páginas web de internet a través de sus pequeños aparatos. Entonces los que administramos un sitio, debemos ofrecer en estos también la mejor usabilidad.

Lo primero que se viene a la mente cuando se habla de optimizar una página web para móviles, posiblemente es una plantilla responsive, sin mas. Pero en realidad, esta gran labor se basa en que toda la materia de la web con la que trabajamos se optimice.

El detalle muchas veces, los plugins o gadgets.

En su mayoría son independientes de la plataforma donde administras tu página web. Estos pueden llegar a ser el inconveniente del tema responsive.

Los que flotan (los que no están en linea o dentro del contenido) son los que mas preocupaban. Pero creo que ya no por 2 cosas:

  1. Muchas empresas que los ofrecen ya lo hacen preparándolos para cualquier resolución de pantalla.
  2. Ridículamente es peor la situación con algunos plugins dentro del contenido. Ejemplo: con los vídeos de YouTube.

Videos de YouTube o Vimeo responsive:

Adaptar videos de YouTube al diseño responsive

Los vídeos de Youtube o Vimeo se insertan en una página web mediante un iFrame, este en su estado natural conserva un tamaño sin importar si el diseño del sitio si es adaptable o responsive.

Seguro también te disgusta que estos contenidos se vean en un móvil de la misma forma como se verían desde un ordenador de escritorio.

MIra:  Como hacer que se registren en tu web o blog

Tu diseño esta optimizado pero la visualización de vídeos no

¿Esto como se resuelve? Ideando

Para que el iFrame del vídeo a insertar se adapte a cualquier resolución de pantalla (o se vuelva mágicamente elástico) lo debemos colocar dentro un div (un contenedor) y después añadirle un poco de CSS.

Si no sabes los significados de estos términos puedes aprender aquí y aquí. 🙂

Entonces el código html solucionador es este:

<div id=”contenedor”>
<iframe
  width=”640″
  height=”480″
  src=”http://www.youtube.com/embed/KK9bwTlAvgo
  frameborder=”0″
  allowfullscreen>
</iframe>
</div>
<style type=”text/css”>
#contenedor {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}
#contenedor iframe,
#contenedor object,
#contenedor embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

Configurando las cosas ahora 🙂

Lo que en el código esta de verde azulado (KK9bwTlAvgo) es la identificación del vídeo en YouTube. Sustitúyela por la del que vas a insertar.

En su URL es muy fácil saber cual es:

https://www.youtube.com/watch?v= <—- lo que sigue

Si se tratara de un vídeo en Vimeo tan solo es necesario cambiar en el código html la fuente del contenido o src.

Esto: “http://www.youtube.com/embed/KK9bwTlAvgo”

Por esto: “http://player.vimeo.com/video/69977069

Lo que se encuentra de verde azulado igualmente seria la ID del vídeo, así de fácil.

Atención: Con un solo código estamos embebiendo CSS directamente en el HTML, lo recomendado es que si el gestor que utilizas te proporciona acceso al archivo .css de tu sitio web añadas los estilos allí.

¿Cual es el CSS del vídeo?

Todo lo que esta entre <style> y </style>

<style type=”text/css”>
#contenedor {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}
#contenedor iframe,
#contenedor object,
#contenedor embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

Al poner lo anterior dentro del archivo .css, obviamente esas etiquetas tendrían que borrarse (<style> y </style>)

MIra:  Como Aumentar el CTR de Adsense

Si la memoria no me falla, se puede entrar al archivo .css en los siguientes programas de creación web full-online:

Weebly, emiweb, Webnode (1.0), Duda.

En los estilos se utiliza el valor 56.25% para padding-bottom ya que el formato del vídeo es wide (apaisado o alargado), pero si no fuera wide este valor debería ser 75%.

Un vídeo de YouTube responsive

Finalmente eso seria todo de mi parte 🙂

Si te ha resultado útil el articulo… Compártelo, saludos Regalame un me gusta.

Jimdo

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *