body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
.iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* Proporción 16:9 para contenedor responsive */
overflow: hidden;
max-width: 100%; /* Evitar que el contenedor sea más grande que la pantalla */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Media queries para ajustar el tamaño del iframe en diferentes tamaños de pantalla */
@media (max-width: 768px) {
.iframe-container {
padding-bottom: 75%; /* Proporción 4:3 para dispositivos móviles */
}
}
