Menú Principal

Este sitio usa cookies y tecnologías similares.

Si no cambia la configuración de su navegador, usted acepta su uso. Saber más

Acepto

Zona descarga

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   

+1 # Fernando 24-01-2017 22:45
Gracias máquina :-)
Responder | Responder con una citación | Citar
+1 # Mario 20-01-2017 12:20
Uf, vaya crack. Perfecto. http://www.ibericatextil.com/product-category/sinteticos-para-tapiceria/sinteticos-de-decoracion/maraton/
Responder | Responder con una citación | Citar
0 # karmany 21-01-2017 10:22
Hola Mario,
Te ha quedado muy bien. :D
Responder | Responder con una citación | Citar
0 # 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)
Responder | Responder con una citación | Citar
-1 # 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 :)
Responder | Responder con una citación | Citar
-1 # Edwin 07-07-2016 07:05
Gracias amigo me sirvió, saludos desde Perú!
Responder | Responder con una citación | Citar
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/
Responder | Responder con una citación | Citar
+1 # #Nyd 15-06-2016 23:46
Excelente, funciona muy bien! gracias
Responder | Responder con una citación | Citar
0 # Jason 19-04-2016 23:03
Muy buen aporte amigo
Responder | Responder con una citación | Citar
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
Responder | Responder con una citación | Citar
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
Responder | Responder con una citación | Citar
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?
Responder | Responder con una citación | Citar
0 # Editor 18-11-2015 23:01
Si pones el enlace podremos echarle un vistazo al código.
Responder | Responder con una citación | Citar

Escribir un comentario

Antes de publicar un comentario, usted debe aceptar nuestras condiciones de uso: Condiciones de uso


 
Visitas: 4615439