サイト内のYouTubeやvideo等の動画を一括レスポンシブ対応する方法

YouTubeの埋め込みコードって、標準ではスマホやタブレットに合わせて動画サイズを変更してくれるレスポンシブ仕様になっていない。

これじゃあ不便なのでCSSで制御したいところだけど、そうする為には、youtubeのコードを<div>で囲まなければいけない。（参照＝HDM MEDIA MEMO）

でもこれでは、毎回毎回youtubeの動画を貼り付ける度にコードを書き換えなければいけないし、すでにサイト内のたくさんの記事内にyoutubeが貼り付けてある場合は、すべて手作業でコードを追加しなくてはならない。

さすがにそれは面倒！

てことで、動画を以下のようにレスポンシブ対応させるためのコードを調査&発見したのでシェア♪

（上デモは実際に以下コードでレスポンシブ化）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('iframe[src*="youtube"],iframe[src*="vimeo"]').wrap('<div class="video"></div>');
});
</script>

<style>
.video{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
}
</style>

やってる事は以下。

1行目： jQuery読み込み（すでに読み込まれているなら必要なし）
2～6行目： Youtubeのコードとhtml5のvideoタグを「<div class="video"></div>」で囲む処理
8～22行目：同Youtubeコードとvideoタグ内の動画をレスポンシブ対応させるCSS

それぞれのサイト構築環境によって、必要ないコードを省いたり、jsファイルやCSSファイル等に分けてコピペしたりすれば良いと思われ。
よく分からない人は、<head></head>内や</body>の直上などに丸々コピペでもいいかと♪