The thor

【THE THOR】YouTubeの埋め込みがレスポンシブにならない?!【5分で解決】

 

【THE THOR】YouTubeの埋め込みがレスポンシブにならない?!【5分で解決】

 

誠太
こんにちは、誠太です。

 

THE THORでYouTubeの埋め込み動画を利用したのですが、スマホで確認してみたところレスポンシブ対応されていない!

 

画面幅からYouTubeの動画がはみ出してしまっている状況。

 

この状況はユーザビリティが良くないと思って解決策を調査してみたところ、5分で解決できる方法を発見したので是非THE THORユーザーの方は参考にしてみてください。

 

【THE THOR】YouTubeの埋め込みがレスポンシブにならない?!【5分で解決】

 

THE THORでYouTubeをレスポンシブにする方法としては、下記の2つのプラグインを導入することで解決できます。

 

  • ARVE Advanced Responsive Video Embedder
  • Shortcake (Shortcode UI)

 

THE THORでYouTubeをレスポンシブ対応にする方法

それでは実際に先程紹介した2つのプラグインを導入していきましょう。

 

プラグイン→新規追加

 

プラグインの新規追加画面が表示されたら、右上のテキスト入力欄に『ARVE Advanced Responsive Video Embedder』と『Shortcake (Shortcode UI)』をそれぞれ入力して、インストール後に有効化してください。

 

プラグイン『Shortcake (Shortcode UI)』をインストール

Shortcake (Shortcode UI)に関しては、特に設定するものはありません。

 

というのも、このプラグインは保険的な役割でインストールしています。

 

後述する『ARVE Advanced Responsive Video Embedder』を有効化して、記事投稿画面で『Embed Video (ARVE)』というボタンが表示されているのですが、クリックすると英語の文字が表示される場合があります。

 

これは、ショートコードを扱うためのプラグインを導入していなかった場合に起こる現象です。

 

そのため、Shortcake (Shortcode UI)をインストールしておいて、正常に『ARVE Advanced Responsive Video Embedder』が動作するようにする必要があります。

 

プラグイン『ARVE Advanced Responsive Video Embedder』をインストール

では、『ARVE Advanced Responsive Video Embedder』をインストール後に有効化をしたら、投稿画面を確認してみましょう。

 

プラグイン『ARVE Advanced Responsive Video Embedder』をインストール

 

この赤枠のようなボタンが表示されていたら、ここまではOKです。

 

続いて、クリック後の画面について見ていってみましょう。

 

ARVE Advanced Responsive Video Embedder設定

 

一番最初の赤枠はYouTubeの埋め込みコードを入力する部分になります。

 

YouTubeの動画のすぐ下に『共有』というボタンがあると思うので、そのボタンをクリックすると『埋め込む』という『<>』マークのボタンがあると思います。

 

 

 

埋め込むボタンをクリックすると、右側のようなコードが表示されます。

 

クリックすると全選択されるようになるので、キーボードのCtrl + Cを押して1番目の赤枠にペーストしてください。

 

簡単な流れ

  • ARVE Advanced Responsive Video Embedderをインストール
  • 一番最初の赤枠に埋め込みコードを貼り付け
  • 更新をクリック

 

 

2番目の赤枠に関しては、動画ファイルの位置を設定する部分になるので、『LEFT』『RIGHT』『CENTER』が設定できるようになっているので、好みで設定してみてください。

 

プラグインを導入後にスマホで投稿画面を確認!

プラグインを導入後にスマホで投稿画面を確認!

 

ここまで設定できたら、ビジュアルエディタの画面で正常にYouTubeが埋め込まれていることを確認して記事を更新してみてください。

 

そうすると、画面からはみ出していたYouTubeの動画が画面内にレスポンシブになった状態で表示されているはずです。

 

これで、これからはYouTubeを埋め込む際には今回紹介した2つのプラグインを使用することで、レスポンシブ対応化した状態で貼り付けることが出来ます。

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  誠太こんにちは、誠太です。   WordPressのテーマは多数存在していますが、今回はその中でも人気なWordPressテーマ『The THOR(ザ・トール)』についてレビュ ...

5

  誠太こんにちは、誠太です。   WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。 &nbs ...

-The thor
-

Copyright© SEITALITY , 2020 All Rights Reserved.