jQueryで後から一括でYouTube等の動画をレスポンシブ対応にする方法

最近自作のレスポンシブテーマに変えてちょっとずつ構築してるんですが、サイトをレスポンシブ化した際に問題になるのが "YouTubeなどの埋め込み動画" でございます。

このサイトもレスポンシブ化した際にYouTubeで埋め込んだ動画がご覧のとおりはみ出してしまいました・・・。

YouTube等の埋め込み動画（iframe）をレスポンシブ化する際には、こちらのサイトに書いてあるような方法が定石かと思いますが、これをやるには ”動画を埋め込んでる記事を探して埋め込みコードをdivで囲わなければならない” という面倒な作業が発生します。

まぁ僕のサイトは記事が少ないので最初から精査していってdivで囲んでもよかったのですが、なんか一括で出来ないかなと思ってたらjQueryに良さげなメソッドが有ったのでこれで一発解決しました！

wrap()を使って埋め込みコードをレスポンシブ化のdivコードで包む

wrap()ってのを使えば指定した要素を好きなんで包めるみたい。こりゃ便利やで。具体的なコードはこんな感じ。

$(function(){
	$('.article_contents iframe').wrap('
');
});

.article_contentsの中のiframeをdivで包みなさいという命令。classの指定は自分のサイトに合わせて頂いて、cssはこちらのサイトを参考にして頂ければと。

ただ、これだと全てのiframeが対象になるので、実用的にするには属性セレクタで絞った方が良いかもですね。

$(function(){
	$('.article_contents iframe[src*="youtube"]').wrap('
');
});

こうしておけばYouTube動画だけが対象になります。

$(function(){
	$('.article_contents iframe[src*="youtube"],.article_contents iframe[src*="vimeo"]').wrap('
');
});

vimeoもやりたいって時はカンマで追加すればOK。他にもあればカンマで繋げていけばよいですね。この方法なら今後も埋め込みコードをタグで囲わなくてよいですな。