Insertar un vídeo responsive de Youtube en tu web y centrarlo

Tamaño de letra:

Vídeo adaptable en tu blog de forma sencilla

smartphone con Youtube responsiveCuando creas una página web adaptable a distintos dispositivos, te enfrentas a que algunos elementos "no quieren" ajustarse tan fácilmente a esa nueva vista y toca buscar soluciones propias. Esto ocurre con algunos vídeos, tablas, captchas y otros que para visualizarlos, por ejemplo, en pequeños smartphones, habría que poner 25 teléfonos en forma de cuadrado (5 por fila y 5 por columna) para poder ver correctamente dicho objeto. Hoy nos centraremos en los vídeos de Youtube.

El problema, como ya te podrás imaginar, es que un vídeo que no está adaptado a varios dispositivos, puede distorsionar tu web y convertir todo tu otro trabajo en un pequeño caos. Para encontrar soluciones, una alternativa es observar el código fuente de webs de relevancia, pero incluso cuando accedo directamente al sitio de Youtube, este no tiene un diseño responsive y "cambiando los headers" para obligar a Youtube a mostrar la web en un smartphone, veo que los vídeos están limitados a 320 píxeles de ancho.

._mvq, ._mce {
width: 100%;
max-width: 320px;
}

Mi propio vídeo responsive

Después de echar un vistazo a otros sitios, no acabo muy convencido y en algunos casos veo que se hace de forma algo compleja, así que decidí coger "papel y lápiz" y ponerme a diseñar un estilo propio, adaptable y sencillo. Como ya comentamos hace tiempo, lo primero es insertar en nuestra web un vídeo desde Youtube. Así que, buscando un vídeo cualquiera, me dirijo a este enlace:

 

http://www.youtube.com/watch?v=0SFa2UOvc8I

Copiar el código desde Youtube

El código que debes copiar y pegar en tu web lo puedes copiar principalmente de 2 formas:

  • Desde Youtube pulsando en cualquier vídeo con el botón derecho del ratón 1, seleccionando "Obtener código de inserción" 2 y copiando el código que aparece:

Insertar código de inserción

  • Desde Youtube y con tu cuenta de usuario abierta (de Youtube), pulsa bajo el vídeo en la opción Compartir 3 > Insertar 4 > Seleccionas tus preferencias 5 y copias el código de inserción 6:

Compartir código inserción Youtube

Para este ejemplo, de una u otra forma, el código copiado (como puedes ver en la imagen que hay sobre estas líneas) es exactamente este:

<iframe width="420" height="315" src="//www.youtube.com/embed/0SFa2UOvc8I" frameborder="0" allowfullscreen></iframe>

Adaptar el código

Un código adaptable no debería tener una anchura y altura fija en píxeles: width="640" height="390", pero voy a crear una clase que mediante CSS sea capaz de sobrescribir o anular esos valores, así cada vez que insertes un vídeo de Youtube, las modificaciones serán mínimas. La clase que voy a crear es ytb-embed, por lo tanto, el código de inserción anterior queda finalmente así:

<iframe class="ytb-embed" width="420" height="315" src="//www.youtube.com/embed/0SFa2UOvc8I" frameborder="0" allowfullscreen></iframe>

Crear los estilos adaptables

Ahora queda escribir el estilo para hacerlo adaptable y que quede centrado en pantalla. Después de hacer varias pruebas y testearlo en los navegadores más populares y en distintos dispositivos, llego a este simple código que puedes añadir a tu hoja de estilos:

iframe.ytb-embed {
max-width: 96% !important;
display: block;
margin: 10px auto;
}

Ejemplos de vídeos adaptables y centrados

El primer ejemplo es el código anterior para insertar, así que si eres visitante recurrente borra la caché para que se cargue el estilo anterior y observa desde varios navegadores y dispositivos el siguiente vídeo:

Redimensiona también tu navegador para ver los resultados.

Última actualización: Domingo, 27 Julio 2014
Comentarios  
0 # Club de Cocina 30-05-2018 22:15
Hay una solución mas simple.
Insertas el codigo de youtube
Luego cuando te muestra el iframe, boton derecho propiedades y en estilos escribis
max-width:96%
Eso es todo. saludos
0 # Jonathan- Codigonexo 16-05-2018 11:24
Bastante buena pero desde mi punto de vista le falta un poco de amplitud, nosotros hemos creado una podrías echarle un vistazo a ver que tal.
Gracias por tu aportación.
Un saludo
0 # Editor 16-05-2018 12:42
Hola, gracias por la aportación le echaré un vistazo.
El tema de la amplitud es cierto que en determinados dispositivos puede parecer más o menos alargado. Esto lo puede adaptar cada uno e incluso en las dimensiones originales que Google inserta en el primer código.
Gracias por tu mensaje, un saludo..
0 # Yeremi 25-03-2018 05:24
Trabajaba en un sitio web y justo me estaba liando con este tema, te agradezco X 100000000000000 0000...
0 # fernando 11-12-2017 14:53
sos un crack
0 # fran 06-06-2017 12:47
No mantiene las proporciones, no tiene formato 16:9 ni es adaptativo.

Saludos
0 # Editor 07-06-2017 15:23
No mantiene las proporciones porque redimensiona en anchura. Esto lo hice así porque en un dispositivo móvil o pequeño, si la altura es proporcional, por ejemplo, 16:9, como dices, se vería muy pequeño.
Además, YouTube brinda otra opción y es ver el vídeo a pantalla completa, simplemente pulsando el botón cuadrado que aparece en el reproductor.
Respecto a "ni es adaptativo", no estoy de acuerdo porque se adapta a cualquier tamaño de pantalla. De todos modos, buscaré el modo de realizar un código para ver los vídeos proporcionales tanto en altura como en anchura.
Gracias por comentarlo.
0 # Edgard Bustos 14-03-2017 18:06
Excelente tutorial, me hiciste smejor la vida, gracias y mil felicitaciones
0 # cyndy 24-02-2017 19:37
Hola muy buena solución, pero cuál sería el CSS para que se adapte también en el vertical?
0 # Aitor 25-02-2017 10:49
Habría que estudiar el caso concreto porque depende de la altura del contenedor, y los márgenes auto como en el caso de este tutorial, no sirven. Si puedes reducir a la mínima expresión tu caso y escribir el código HTML en una web como esta:
https://jsfiddle.net/
Quizá alguno/a pudiera ayudarte.
Un saludo.
+1 # Fernando 24-01-2017 22:45
Gracias máquina :-)
+1 # Mario 20-01-2017 12:20
Uf, vaya crack. Perfecto. http://www.ibericatextil.com/product-category/sinteticos-para-tapiceria/sinteticos-de-decoracion/maraton/
0 # karmany 21-01-2017 10:22
Hola Mario,
Te ha quedado muy bien. :D
+1 # José Luis 03-09-2016 04:08
Hola amigo, muchas gracias por esta gran solución. Simple y muy bien explicada. Me salvaste, no encontraba solución a este problema en ninguna parte (alguna que no fuese cambiar de theme o plugins que cambiaban totalmente la estructura del theme que uso)
0 # Elier 23-08-2016 00:50
Hola, me ha resultado perfecto, pero que línea habría que añadirle al CSS si quiero que el ajuste de tamaño sean tanto en lo ancho como en lo alto?... gracias :)
0 # Edwin 07-07-2016 07:05
Gracias amigo me sirvió, saludos desde Perú!
0 # Juan Carlos 22-06-2016 16:49
Muchas gracias funciona perfecto. Saludos

Aquí está la muestra: grafimetalperu.com/blog.html

Mi blog:

peru-ventas.blogspot.com/
+1 # #Nyd 15-06-2016 23:46
Excelente, funciona muy bien! gracias
0 # Jason 19-04-2016 23:03
Muy buen aporte amigo
0 # Pilar 03-04-2016 09:12
Me parece un artuculo muy interesante, Me encantaria centrar el video pero no se donde introducir el estilo en wordpress.
Gracias de antemano
0 # Luis 03-04-2016 10:43
¿Por qué no intentas instalar un plugin con Simple Custom CSS? Es sencillo de usar
Enlace Simple Custom CSS
0 # Rafa 18-11-2015 22:50
Por algú nmotivo no me funciona este codigo en mi blog de blogger con un video de 650 en pagina estática. No logro que se adapte. Algún consejo o posible error?
0 # Editor 18-11-2015 23:01
Si pones el enlace podremos echarle un vistazo al código.

No tiene privilegios para responder a los comentarios.


 
Visitas: 8562264