Colocar iframe responsive-adaptable en una entrada o blog Blogger

¡Un tutorial más! Vamos seguro este truco te va encantar, seguro conoces lo que es un Iframe nada del otro mundo, pero, ¿Alguna vez usaste uno adapatativo o responsivo? ¡Cosa de locos! pues este iframe muy normal con algunas líneas de código más dará el poder para ser responsivo.

Veamos una fiel prueba del que el título del post indica:

Mueve el tamaño de la ventana del navegador para que notes el efecto adaptativo

¿Cómo ponerlo en tu blog?

1. Lo primero será ir a tema > Editar HTML y buscamos ]]></b:skin> justo encima pega el siguiente código de CSS:

.wrapper {
    position: relative;
    width: 80%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
}
.wrapper iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Ahora irás a la entrada o página a publicar y en el HTML pegarás el siguiente código:

<div class="wrapper">
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="URL IFRAME"></iframe>
</div>

¡Listo! Sólo modifica lo que está en color rojo por la URL que deseas visualizar en el iframe y observa la magia en tu blog.