【WordPress】YouTube動画をレスポンシブ対応させるコード

スキルアップ
2020.01.26

普通にYoutubeからリンクアドレスをコピペするだけでレスポンシブル対応。自動的に記事内の横幅最大表示で、スマホでみてもよろしい感じ。そうなるコード、PHPとCSSの紹介です。コピペでOKです。

残念情報：YouTubeの埋め込みURLは「固定幅」しかない

WordPressの記事にYoutube動画から「共有 ＞ 埋め込み」でコピペしたコードを埋め込むと固定幅で表示されてしまいます。意外に小さいです。そしてレスポンシブ対応もしません。

動画も写真同様に「かっこよく」表示させたいです。

なので、そのカスタマイズ方法を書きます。
コピペでOKです。

YouTubeの共有URLを記事に貼ると「自動的にタグで囲まれる」ようにする

手順１—–functions.phpに以下のコードをコピペします。

外観 ＞ テーマエディター ＞ テーマファイル ＞ functions.php　にコピペ。
注意：phpファイルは ＜？ｐｈｐ という宣言が必要なので、その文字の直下に貼り付けてください。違うところに貼ると、ブログが壊れます。PHPファイルの意味がわからない場合、ドットインストールのPHP講座でPHPファイルの書き方を3分ほど見ておきましょう。


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）をWordpressの記事に貼ると
自動的に【<div class=”youtube”>】で囲まれます。
レスポンシブするスタイルシートを適用させる準備です。

で、スタイルシートを適用させるコードは次です。

YouTubeの動画表示をレスポンシブするようにCSSの上書きをする

手順２—–cssに以下のコードをコピペします。

外観 ＞ カスタマイズ ＞ 追加css　にコピペ。

以下のコードを余白にコピペです。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

以上です。
この設定をしておけば、今後は全てのyoutube動画がレスポンシブ対応になります。

やる前に、functions.php のバックアップをとっておくと安心です。
CSSの上書きは、書いたモノを消せば元通りになりますのでOKです。

タイトルとURLをコピーしました