ブログ記事内にyoutube動画を入れる際にレスポンシブ対応にする方法
wordpressで作ったブログにyoutube動画を埋め込みたい時があると思いますが、
レスポンシブデザインのテーマを入れていても
埋め込んでいるyoutube動画だけは、画面からはみ出してしまう(泣)
な時に使えるちょっとしたカスタムです。
編集するファイル
●functions.php
●ファイルの場所
/wordressファイルのディレクトリ/wp-includes/functions.php
functions.phpをテキストエディタで開いて一番下に
youtube動画を自動でレスポンシブ対応するためのコードを入れるだけ。
あとで分かりやすいようにコメントアウトでメモいれておくのもいいかもです。
埋め込むコードは以下
1 2 3 4 5 6 7 8 9 |
//youtube動画 自動でレスポンシブ対応するためのコード function iframe_in_div($the_content) { if ( is_singular() ) { $the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content); $the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content); } return $the_content; } add_filter('the_content','iframe_in_div'); |
こうしておくとビジュアルモードで入力していても、youtube動画のURLを
入れるだけで自動的にレスポンシブ対応になってくれます。