沖縄生活

ワードプレス Youtube動画 スマホ表示の横幅を最適化するプラグイン!

更新日:

WordPressにYouTube動画を埋め込む方法は、プラグインを使用する方法とURLを書き込む方法の2通りあります。

私のブログではテンプレートにショートコードが埋め込んであって、

<div class=”v-wrap al-c m30-b”>
<!–ここに埋め込み用タグを記述–>
</div>

を埋め込むだけで横幅がレスポンシブ対応になります。最近気づきました(笑)では、ショートコードが埋め込まれていないテンプレートの場合はどうしたらいいのか?

いろんな方法がありますが、今回はプラグインを使った方法を紹介します。

Advanced Responsive Video Embedderを使う

まず、ワードプレスのプラグインで「Advanced Responsive Video Embedder」を検索してアップロードします。

Advanced Responsive Video Embedder

有効化して、設定画面に進みます。

Advanced Responsive Video Embedder

Default Mode:normal
Aligned Maximal Width:400px(初期値)を好みの大きさに変更する。
Fake Thumbnails:チェックを外す。

Screen Shot 2014-11-27 13.13.08

Advanced Responsive Video Embedder

変更を保存する。これで完了です。

Advanced Responsive Video Embedder使用前と使用後

Advanced Responsive Video Embedderの設定を有効化した後、スマートフォンの画面を見てみましょう。

BEFORE

youtube

AFTER

youtube

これでユーチューブ動画の共有URLを埋め込むだけで、レスポンシブ対応が可能になりました。

YouTubeのURLは共有から選択しよう

Youtubeの貼り付けたい動画の画面から「共有」をクリック。

island color

表示されたURLをコピーしてペースト。

island

記載されてるURLをコピーしたら、次は編集画面へ貼付けるだけ。

※ビジュアルエディタではなくテキストエディタで貼り付けてください。

まとめ

今まではスマートフォンで見ると、横幅がはみ出してしまって見る人が不便でした。このプラグインを使うことでPCもスマートフォンも最適化されたサイズで読んでもらえるのでとっても助かります。

もしあなたがYoutube動画のスマホ表示で悩んでいるなら、こちらのプラグインを試してみてくださいね。

-沖縄生活
-, , , ,

Copyright© ヒガシーサーのカメラ沼 , 2017 All Rights Reserved Powered by AFFINGER4.