Google Docs: Hacer responsive cualquier Iframe

¿Qué es un iframe y cuál es su función?

Un iframe funciona como una ventana en tu sitio web que te facilita la visualización de contenido de otras páginas. Visualiza que cuentas con un espacio en tu pared y puedes observar lo que sucede en la habitación contigua. De esta manera opera un iframe, pero en el ámbito digital.

Un iframe te permite insertar mapas, vídeos, formularios y mucho más sin la necesidad de construir todo ese contenido desde el inicio. Es un método muy eficaz para potenciar tu sitio web con datos valiosos para tus visitantes.

La operación de un iframe

Un iframe genera un marco imperceptible en tu sitio web donde se aloja el contenido externo. Es similar a abrir una pequeña ventana hacia otro sitio web dentro de tu propio ordenador.

Lo ideal es que el contenido del iframe se actualiza de manera automática si se modifica la fuente inicial. De esta manera, siempre tienes la información más actualizada sin necesidad de realizar ninguna acción. 

Colocar los iframes de Google docs en tu sitio web, y hacerlos responsive (autoajustables)

Paso 1: el siguiente código funciona para hacer responsive cualquier documento o formulario de Google docs, como los formularios para encuestas, Excel, Word, Google Maps, etc.

Puedes copiar el código que está en el siguiente cuadro de texto:

COLOCAR LA PRIMERA PARTE DEL CÓDIGO EN EL POST O ENTRADA.

CÓDIGO: PARTE 1 de 2:

----------------------------

    <div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
       <div class="responsive-wrapper responsive-wrapper-wxh-760x1200">
         <iframe src="https://docs.google.com/forms/d/e/4444pQLSfimDXyxTRKMOFRD5eeCIjieG8Vq9vBZbLhKXIO-mPfyyA/viewform?embedded=true">Cargando...</iframe>
       </div>
     </div>

----------------------------

NOTA: recuerda sustituir la URL de este iframe por la tuya.

LA SEGUNDA PARTE DEL CÓDIGO LA DEBES COLOCAR EN EL PERSONALIZADOR CSS.

CÓDIGO: PARTE 2 de 2:

----------------------------

    #Iframe-Liason-Sheet {
    max-width: 760px;
    max-height: 1200px;
    overflow: hidden;
    }
    /* inner wrapper: make responsive */
    .responsive-wrapper {
    position: relative;
    height: 0; /* gets height from padding-bottom setting */
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    }
    .responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    }
    /* padding-bottom = h/w as a % */
    .responsive-wrapper-wxh-760x1200 {
    padding-bottom: 363.6364%;
    }
    .iframe-border {
    border: 1px solid #000;
    }
    .center-block-horiz {
    margin-left: auto !important;
    margin-right: auto !important;
    }

----------------------------

Paso 2: recuerda sustituir la URL de este iframe por la tuya.

👉 ¿Te ha sido útil este artículo? Deja tu comentario. ¡No guardes el secreto! Compártelo con quienes puedan aprovecharlo y únete a mi comunidad en redes sociales para más contenidos especializados. ¡Tu apoyo es fundamental para seguir generando valor! 👇

Jorge Andres Amaya Licenciado en Economía y maestría en Administración, con amplio dominio de diversas herramientas digitales y prompts.