ワードプレス(WordPress)の投稿 YouTube動画をレスポンシブ(スマホ対応)で掲載する方法

Categories | ブログ(WordPress) YouTube スマホ

ワードプレス(WordPress)の投稿時に、

YouTube動画をレスポンシブ(スマホ対応)で掲載する方法

備忘録

 

今までYoutube動画を記事に挿入する時、

テキスト入力にしてiframeで囲んで書いてました。

でもスマホシェアがここまで拡大してしまった現在、

無視する訳いかなくなったので、自作テーマをカスタマイズしました。

 

そう言えば、いつの間にかyoutube のURLを入力するだけで、

自動的にプレイヤーが生成表示さることを知ったのは、

極々最近の私です。ウフフ

 

参考にしたページはこちら↓

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

 

参考にしたページを更にカスタマイズ。

パソコンで見る場合、youtube動画の左右にマージン作り、

記事内の中央に表示させるようする。

スマホだと画面が小さいからマージンをなくし、記事内いっぱいに表示する。

※動画の左右のマージンは、画面の横サイズが640px以上で表示される

設定にしてあります。

 

1106 400x356 ワードプレス(WordPress)の投稿 YouTube動画をレスポンシブ(スマホ対応)で掲載する方法

 

いじるファイルは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つのファイルもアップデートされちゃって、

自分でカスタマイズしたところは消えてしまいます。

そこらは気をつけなければです。

 

しまい

Comment(0) | Trackback(0)

TAGS: / / / | 2017年11月6日 |

« »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です