cómo aplicar responsive de un iframe o div con background-image

Es muy común llenar de media queries tu archivo CSS para conseguir adaptar un iframe o un div con imagen de fondo cambiando el alto y el ancho cada vez,

La solución que propongo es la siguiente:

iframe{

height:0;

width:100%;

padding-bottom: 66%;

}

De éste modo siempre el ancho y el alto del elemento estarán relacionados

Simple, ¿no? Demo