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。他にもあればカンマで繋げていけばよいですね。この方法なら今後も埋め込みコードをタグで囲わなくてよいですな。
SPONCERD
コメントはまだありません