Para que los objetos, iframes y vídeos que compartimos en una Web se adapten a los distintos dispositivos, es decir, que sean "responsive", podemos envolverlos en un div contenedor (iframe-container) y aplicar las siguientes reglas CSS.
Reglas CSS:
<style> .iframe-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .iframe-container iframe, .iframe-container object, .iframe-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
Ejemplo con object:
<div class="iframe-container"> <object type="text/html" data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d194347.38441029828!2d-3.8196196483803573!3d40.43813107973298!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd422997800a3c81%3A0xc436dec1618c2269!2sMadrid!5e0!3m2!1ses!2ses!4v1587910487487!5m2!1ses!2ses" style="width: 600px; height:400px;"> ERROR (no puede mostrarse el objeto) </object> </div>
Resultado:
Ejemplo con un iframe:
<div class="iframe-container"> <iframe src="//www.slideshare.net/slideshow/embed_code/key/exvMftSyV7yRQR" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen></iframe> </div>
Resultado:
Ejemplo con un vídeo de YouTube:
<div class="iframe-container"> <iframe width="580" height="360" src="https://www.youtube.com/embed/6IVMu-rfThs" frameborder="0" allowfullscreen></iframe> </div>
Resultado:
Y vosotros, ¿conocéis alguna otra técnica?
0 Comentarios