IFRAME ADAPTATIVO
Para que en una página html5 sea adaptativo un <iframe≫ debemos meterlo
dentro un div contenedor y posicionar el iframe en forma absoluta dentro de la div.
Esto porque el iframe NECESITA que los atributos WIDTH y HEIGHT estén explícitamente determinados.
Entonces para conservar la proporción, a esta div se le da una altura de cero y un padding-bottom de porcentaje proporcional a su relación de aspecto. Por ejemplo, 75% para una relación 4:3 y 56.25% para una 16:9. Estas son las dos relaciones más comunes, pero pueden calcularse otras cualquiera Por ejemplo, para una relación 3:2 será (2/3)*100 = 66.66%.
Esto porque el iframe NECESITA que los atributos WIDTH y HEIGHT estén explícitamente determinados.
Entonces para conservar la proporción, a esta div se le da una altura de cero y un padding-bottom de porcentaje proporcional a su relación de aspecto. Por ejemplo, 75% para una relación 4:3 y 56.25% para una 16:9. Estas son las dos relaciones más comunes, pero pueden calcularse otras cualquiera Por ejemplo, para una relación 3:2 será (2/3)*100 = 66.66%.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0";>
<style>
.you2b {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.you2b iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="you2b" >
<iframe width="560" height="315" src="https://www.youtube.com/embed/gjvmAkFSHws"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
</body>