WordPressで作ったサイトで、YouTube動画を貼り付けたい時。
通常でしたら、YouTubeにある“埋め込みコード”を記事に貼り付ける…という方法が一般的だと思います。
そのiframeに対して、CSSを設定することで動画の大きさを指定することは可能ですし、以前『【CSS】iframe動画をレスポンシブ対応させる方法とは？』にてご紹介したように、iframe動画をCSSでレスポンシブ対応させることも可能です。
ただ、埋め込みコードを取得するのがちょっと億劫だな…と思い、動画が再生されているYouTubeページのURLを記事に貼り付けるだけでキレイに表示させれたらなぁ、と思いました。
元々WordPressではYouTube動画のURLを記事に貼り付けるだけでも自動的にiframe動画として出力してくれるのですが、それだと記事コンテンツの幅まで動画が大きく表示されてしまうという問題が生じてしまいます。
なのでYouTube動画のURLを貼り付けて出力した時、『【CSS】iframe動画をレスポンシブ対応させる方法とは？』でご紹介したようにiframe動画をclassで挟み、そのclassに対してCSSを設定することでYouTube動画を大きさ指定かつレスポンシブ対応させることが可能になる方法を見つけました！
そこで今回はYouTube動画のURLを貼り付けたら、自動的にclassでiframeを囲んでくれる方法をご紹介したいと思います！
functions.phpにコードを記述する
YouTube動画のURLを貼り付けたら、自動的にclassでiframeを囲んでくれる方法、それを実行するにはfunctions.phpに下記のコードを記述する必要があります。
function custom_youtube_oembed($code){
if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
$html = preg_replace('/ width="\d+"/', '', $html);
$html = preg_replace('/ height="\d+"/', '', $html);
$html = '<div class="ご自身で設定するクラス名">' . $html . '</div>';
return $html;
}
return $code;
}
add_filter('embed_handler_html', 'custom_youtube_oembed');
add_filter('embed_oembed_html', 'custom_youtube_oembed');
5行目の
$html = '<div class="ご自身で設定するクラス名">' . $html . '</div>';
には好きなクラス名を記述してあげましょう。
以上のコードを記述することで、YouTube動画のURLを記事に貼り付け、出力する際に
<div class=”～～～”><iframe ～～～～～></div>
という風にclassでiframe動画を囲ってくれるので、classに対してCSSを設定することでYouTube動画を表示する際に動画の大きさなどを設定することが可能になります！
まとめ
以上がYouTube動画のURLを貼り付けるだけで動画の大きさなどを設定する方法でした！
この方法、なかなか便利なので是非ともYouTube動画を記事に貼り付けることが多い方は設定してみてはいかがでしょうか？？
