Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Cómo hacer responsive vídeos de Youtube, Vimeo y similares en iframes

Sencillo post en el que vamos a ver cómo hacer responsive vídeos de Youtube, Vimeo y similares cuyo código esté en iframes iframes. Estas plataformas a la hora de ofrecernos el código nos dan el iframe con un tamaño fijo que luego nos puede provocar problemas con las dimensiones de pantalla. Otros post interesantes:

Cómo hacer responsive vídeos de Youtube y Vimeo con CSS

Os muestro el código CSS necesario:

Os explico la CSS:

  • El primer bloque corresponde al div contenedor del iframe de Youtube, Vimeo u otro similar con código iframe.
  • Dicho vídeo debe ser de formato 16:9 (Horizontal, panorámico).
  • El segundo bloque cambia los tamaños por defecto del iframe mediante CSS.

Ejemplo HTML para hacer responsive vídeos de Youtube

Cómo hacer responsive vídeos de Youtube

Os muestro el código de ejemplo para el caso de un vídeo de Youtube:

Con este código y la CSS anterior ya tendríamos listo nuestro vídeo responsive, el nombre de la clase del div y la CSS ‘div_contenedor’ podemos cambiarlo por el que queramos, pero los nombres siempre deben coincidir.

Ejemplo HTML para hacer responsive vídeos de Vimeo

Cómo hacer responsive vídeos de Vimeo
Aquí un nuevo código para el caso de los vídeos de Vimeo:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Centro de preferencias de privacidad

Cookies imprescindibles

para medir la audiencia

ga,gdpr