Objetos, Iframes y vídeos responsive

neo 2.0 - Objetos, Iframes y vídeos responsive

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:

ERROR (no puede mostrarse el objeto)

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?

Comentarios

Entradas populares de este blog

Enlaces tipo ancla con desplazamiento animado con jQuery