普通に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です。