Para que una presentación de Google Slides (un PPT alojado en Drive) o un vídeo de YouTube, sean responsive (que se adapte a móviles, tablets y ordenadores), no basta con el código que Drive nos da por defecto. Necesitamos aplicar una técnica de CSS llamada "aspect ratio box".
HTML: Utilizaremos un contenedor <div> que envuelva al <iframe>.
CSS: Definiremos que el contenedor mantenga una proporción (normalmente 16:9) y que el frame ocupe el 100% de ese espacio.
Resultado: La presentación se encogerá o agrandará automáticamente según el tamaño de la pantalla sin perder su forma.
Código y Componentes
Aquí tienes el código completo. Puedes copiarlo directamente en tu archivo HTML o en el editor de tu web.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
/* Contenedor de la presentación */
.contenedor-responsive {
position: relative;
overflow: hidden;
width: 100%;
/* Proporción 16:9 (9 / 16 = 0.5625) */
padding-top: 56.25%;
}
/* Estilos para el iframe */
.contenedor-responsive iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="contenedor-responsive">
<iframe
src="TU_ENLACE_AQUI"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true">
</iframe>
</div>
</body>
</html>
Instrucciones de implementación
Obtén el enlace: En tu presentación de Google Slides, ve a Archivo > Compartir > Publicar en la web. Selecciona la pestaña "Insertar" y copia solo la URL que aparece dentro del atributo src="...".
Sustituye el enlace: Cambia el texto TU_ENLACE_AQUI en el código de arriba por la URL que copiaste.
Ajuste de proporción:
Si tu presentación es panorámica, usa padding-top: 56.25% (16:9).
Si tu presentación es estándar, usa padding-top: 75% (4:3).
Explicación técnica
position: relative en el contenedor: Permite que el iframe se posicione de forma absoluta respecto a este cuadro.
padding-top: Esta es la "magia". Al usar un porcentaje en el padding basado en el ancho, creamos un hueco con una proporción fija.
position: absolute en el iframe: Obligamos al video/presentación a "estirarse" y rellenar exactamente el área creada por el padding del contenedor.
La misma historia para insertar "responsive" un vídeo de YouTube.
Ver ejemplo de Powerpoint a continuación:
No hay comentarios:
Publicar un comentario