iframeをjqueryで縦横比を保ったままレスポンシブで貼り付け

JavaScript | jQuery | 2016/1/17

cssでもできるんですが
jqueryの方がいいという場合はこういう感じでいけます。
youtubeとかその他動画の埋め込み用途には使えると思います。

以下のコードでは、
articleというクラスの中のiframeに対して、幅100%で16:9の比率を保ったままレスポンシブにしています。

一応解説すると、eachで全てのiframeを取得し、取得した全てに対してまずは幅を100%にしています。
その状態でそれぞれの幅をピクセルで取得し、比率で16:9に合うように高さを算出しています。

まあコードは単純なんですが、毎回書くのも面倒なので。
クラス名とか100%のところは好きに変えてください。

function iframefit(){
	$('.article iframe').each(function(){
		$(this).css('width','100%');
		var width =  $(this).width();
		var height = width*(9/16);
		$(this).css('height',height);
	});
}

$(document).ready(function(){
	iframefit();
});

$(window).resize(function(){
	iframefit();
});

質問やご指摘など気軽にどうぞ

コメントを投稿する