En muchas ocasiones, cuando insertamos o hacemos un ‘embed’ de un vídeo de Youtube, nos pone un tamaño fijo, algo que como ya sabréis no es muy recomendable, debido a que si este contenido se visualiza desde otros dispositivos, es bastante posible que no se vea correctamente. Por ejemplo, el problema más común es que accedemos un sitio web desde nuestro smartphone y el vídeo de Youtube que nos muestran no es responsive, por lo que el vídeo sale de forma gigante y desproporcionado en nuestra pantalla.

Esto genera una desagradable experiencia de usuario, por lo que al final se reflejará en el tráfico de nuestro sitio web.

Con un sencillo código CSS vamos a convertir nuestros vídeos de Youtube en Responsive.

Las reglas CSS son las siguientes:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Y nuestro código HTML el siguiente:

<div class="video-container">
    <iframe src="https://www.youtube.com/watch?v=G9POhCXEEDc" frameborder="0" width="560" height="315"></iframe>
</div>

Debemos añadir un div con la clase ‘video-container’ para que nos haga nuestro vídeo de Youtube de forma responsive. Aunque en el iframe le hayamos asignado un ancho y alto, el CSS se encargará de hacerlo totalmente adaptable a cualquier dispositivo.

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


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.     ACEPTAR