ワードプレス（WordPress）の投稿 YouTube動画をレスポンシブ（スマホ対応）で掲載する方法
投稿日: 2017年11月6日
ワードプレス（WordPress）の投稿時に、
YouTube動画をレスポンシブ（スマホ対応）で掲載する方法
備忘録
今までYoutube動画を記事に挿入する時、
テキスト入力にしてiframeで囲んで書いてました。
でもスマホシェアがここまで拡大してしまった現在、
無視する訳いかなくなったので、自作テーマをカスタマイズしました。
そう言えば、いつの間にかyoutube のURLを入力するだけで、
自動的にプレイヤーが生成表示さることを知ったのは、
極々最近の私です。ｳﾌﾌ
参考にしたページはこちら↓
WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法
参考にしたページを更にカスタマイズ。
パソコンで見る場合、youtube動画の左右にマージン作り、
記事内の中央に表示させるようする。
スマホだと画面が小さいからマージンをなくし、記事内いっぱいに表示する。
※動画の左右のマージンは、画面の横サイズが640px以上で表示される
設定にしてあります。
いじるファイルは2つ
/wp-content/themes/テーマ名/functions.php
/wp-content/themes/テーマ名/style.css
functions.phpに追記
function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '
<div class="youtubebox">
<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>
</div>
', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
style.cssに追記
.youtubebox { margin:0 10%;}
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
@media screen and (max-width: 640px) {
.youtubebox { margin:0;}
}
※ あくまでも自作テーマのカスタマイズです。
どこからかフリーで貰ってきたテーマだと、たま～に配布元がアップデートするから、
その時いじった2つのファイルもアップデートされちゃって、
自分でカスタマイズしたところは消えてしまいます。
そこらは気をつけなければです。
しまい
