Hoy en día, cualquier diseño web debe ser adaptable al dispositivo con el que se visualiza, ya sea el PC, tablet, móvil, … es lo que se llama Responsive Design, esto se consigue mediante las “media queries” de CSS, pero, ¿cómo hacer responsive los vídeos que se insertan mediante un “iframe”?
Pues bien, para que el iframe se adapte necesitamos crear un div contenedor y, por supuesto, unos estilos css:
<div class="video-container"> <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/wVasXZMFDo8" width="560"></iframe> </div>
CSS
.video-container {
position: relative;
padding-bottom: 56.25%; /* Para que el contenedor tenga relación de aspecto 16/9 */
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%;
}
