iframe を使う機会は随分少なくなり、Google マップや YouTube 程度。ただ、スマートフォンおよびタブレットの普及により、レスポンシブの要望は必須のような状況です。
そのような状況ですので、レスポンシブで iframe を使うケースがあります。コーポレートサイトの制作をメインとしている当オフィスでは、Google マップでの利用がほとんどですが、希に Google カレンダーや YouTube のご要望があります。Google マップの場合、高さ固定でも問題とならないのですが、Google カレンダーの場合は、スマホでみるとカレンダーが画面からはみ出している状態となったり、YouTube の場合、横長になってしまったりと支障が生じます。

なので、次のようなことを行います。

<div class="sample">
<iframe src="(パス)"></iframe>
</div>

CSS については・・・。

.sample{
	position:relative;
	padding-bottom:56.25%; /* 16:9 の場合 56.25%，4:3 の場合 75% */
	width:100%;
	height:0;
	overflow:hidden;
}
.sample iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}

なお、Google カレンダーの場合、カレンダーが取得した HTML コードでは、私の iPhone5 でどうしてもはみ出るため、

https://calendar.google.com/calendar/embed?src=

ではなく

https://calendar.google.com/calendar/htmlembed?src=

が表示されるよう @media screen で切り替えて対処。