I have struggled for a long time to get my YouTube videos to keep their ratio on different screen sizes. When testing my website on a smartphone, I would spend hours trying to figure out why my videos did not do what I expected… Until I finally discovered a great CSS trick that I can apply to all my iframes. Play with the size of the screen to see the responsive iframe at work. I can’t wait to share this trick with you in the following article.
For the purpose of demonstration, this article will use a YouTube embed for our iframe. First, go on YouTube, click on ‘share’ under the video and then ‘embed’. You should now have the following code to copy into your html.
Afterwards, we need to wrap the iframe in another html element like a <div>, this is very important as this element will be sizing your iframe. Then add a CSS class to your new wrapping element and one class to your iframe as seen below.
Once you are done, you should get an iframe that is responsive. Here I have a <video> instead because of some blog restrictions. But it works exactly the same way. You can play around with your browser size and see how responsive your iframes would be!
Pero cuando traté de implementar el HTML y CSS para que se ajustara a mis necesidades, no tuve los mismos resultados/éxito. He creado mi propio JSFiddle para poder mostrar cómo no me funciona igual. Estoy seguro de que tiene algo que ver con el tipo de iFrame que estoy utilizando (por ejemplo, las imágenes de los productos podrían necesitar ser responsive también o algo así?)
Mi principal preocupación es que cuando los lectores de mi blog lo visiten en su iPhone, no quiero que todo esté a una anchura x (100% para todo mi contenido) y entonces el iFrame se comporte mal y sea el único elemento más ancho (y por lo tanto sobresalga por encima de todo el resto del contenido – si tiene sentido?)
Los iFrames PUEDEN ser TOTALMENTE responsivos manteniendo su relación de aspecto con una pequeña técnica CSS llamada Técnica de Relación Intrínseca. Escribí una entrada en el blog sobre esta cuestión específicamente: https://benmarshall.me/responsive-iframes/
DA tiene razón. En tu propio fiddle, el iframe es efectivamente responsivo. Puedes verificarlo en firebug comprobando el tamaño de la caja del iframe. Pero algunos elementos dentro de ese iframe no son responsivos, por lo que “sobresalen” cuando el tamaño de la ventana es pequeño. Por ejemplo, el ancho de div#products-post-wrapper es de 8800px.
</div> Prueba a cambiar el tamaño de la ventana de tu navegador para ver el iframe responsivo en acción.No te olvides de hacer lazy-load de tus iframes. Además de hacer que tus iframes sean responsivos, deberás cargarlos de forma perezosa utilizando el atributo loading. Esto mejora los tiempos de carga de la página, mejora la experiencia del usuario y aumenta el posicionamiento en los motores de búsqueda. Obtenga más información sobre cómo hacer lazy-load de los iframes.Lista de ratios para iframes responsivos.Aquí tiene una lista de otros porcentajes de relación de aspecto que puede utilizar al definir el padding-top.padding-top: 56,25%; /* relación de aspecto 16:9 */
padding-top: 100%; /* relación de aspecto 1:1 */¿Qué es una relación de aspecto? La relación de aspecto de un elemento describe la relación proporcional entre su anchura y su altura. Dos relaciones de aspecto de vídeo comunes son 4:3 (el formato de vídeo universal del siglo XX), y 16:9 (universal para la televisión de alta definición y la televisión digital europea, y para los vídeos de YouTube).Responsive iframes con SassSass hace que sea aún más fácil crear iframes responsivos. Puedes crear una función de relación que calcule el porcentaje de relleno necesario para una determinada relación de aspecto y, a continuación, un mixin que genere los estilos.The responsive iframe Sass mixin.Utiliza este mixin de Sass para crear un cuadro de relación de aspecto para tus iframes./// Cuadro de relación de aspecto.
Me gustaría que mi iFrame disminuyera de tamaño, manteniendo su proporción/dimensión, a medida que el ancho del navegador disminuye, para evitar que el contenido del iframe se desborde fuera de su elemento incrustado y se salga de la pantalla en los anchos de navegador más pequeños.
Estoy tratando de lograr este comportamiento para mi incrustación iFrame, y no he sido capaz de hacerlo con éxito. He aplicado estas distinciones de diseño al div incrustado, pero las dimensiones especificadas en el código del iFrame lo estropean, dando como resultado que el contenido del iframe se desborde fuera del div incrustado y se salga de la pantalla en anchos de navegador reducidos.
He buscado ayuda en el foro, pero sólo he encontrado soluciones para incrustaciones de vídeo. Estoy utilizando el elemento de incrustación estándar para mi iFrame sin vídeo. He revisado algunos otros recursos, y parece que debería ser capaz de lograr esto mediante la eliminación de las dimensiones del código iFrame sí mismo, y su sustitución por el código que le dice a ser 100% de ancho / altura automática, pero estoy luchando para entender exactamente cómo tal código debe ser formateado en mi código iFrame, y cómo aplicarlo correctamente a mi incrustación iFrame.