Accessibility Tools

Skip to main content

Video Responsive de Youtube

Para tener un video de youtube incrustado en nuestra página y que se adapte de forma "responsive" según el tamaño de pantalla debemos hacer lo siguiente:

Debemos meter el vídeo incrustado (iframe *) dentro de un contenedor (parrafo o div) al que le añadiremos una clase CSS que será la que haga la magia. Es necesario quitar el ancho y alto del iframe del video.

<div class="video-youtube-responsivo">
	<iframe src="https://youtu.be/XXXXXXXXXX" frameborder="0" allowfullscreen></iframe>
</div>

Luego debemos meter el código CSS de la clase del contenedor que hara que nuestro/s video/s sean responsivos

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

Ver ejemplo:

 

 

| Diseño