【全国】「ウーバーイーツ」の「配達パートナー募集」がエリア拡大中!登録はここをクリック【募集中】

【WordPress】YouTube動画レスポンシブ対応プラグイン「ARVE Advanced Responsive Video Embedder / Shortcake」【ワードプレス】

【WordPress】YouTube動画レスポンシブ対応プラグイン「ARVE Advanced Responsive Video Embedder Shortcake」【ワードプレス】

【ワードプレス】YouTube埋め込み動画をレスポンシブ対応させるWordPressプラグイン

WordPressに埋め込む「YouTube動画」を、自動でレスポンシブ対応させる「プラグイン」を、動画で紹介しています。

WordPressプラグイン
  • ARVE Advanced Responsive Video Embedder
  • Shortcake

上記の2種類のプラグインを「WordPress(ワードプレス)」にインストールすれば、YouTube動画を、簡単にレスポンシブ化させられます。

プラグインを使わずにYouTubeをレスポンシブ化させる方法

プラグインを使わずに、レスポンシブ化させる方法を、解説しています。

下記で、具体的な方法を解説しています。一番安全な方法から試してみてください。

【パターンA】追加CSSで書き換える方法

ワードプレス上で変更していきます

①「埋め込みタグ」に「div」要素を追加する

まずは、「レスポンシブ対応したい動画」の「埋め込みタグ」の上下を挟む形で、「divのclassをvideo」とする「div要素」をHTMLで追加してください。

HTML
<div class="video">埋め込みタグ</div>

ワードプレス上に追加CSSを入力します

②「WordPress」で「追加CSS」を挿入する

次に、「WordPress」を操作して、下の「追加CSS」を挿入してください。

CSS
.video {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%;
     height: 0;
}
 
.video iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
注意
WordPressでCSSを追加・編集をする場合は、後で戻せなくなって後悔しないよう、必ず「始める前のデータ」を「コピー&ペースト」で「メモ帳」などに「バックアップ」しておきましょう!「必ず」です!!!

上記の「CSS」を追加する方法には、下の3パターンがあります。

ワードプレスで「追加CSS」を入力する場所【どれか1つを実行】

  1. 「外観」⇒「カスタマイズ」⇒「追加CSS」に入力する
  2. 「外観」⇒「テーマエディター(テーマ編集)」から「子テーマ」の「スタイルシート」に入力する
  3. 「外観」⇒「テーマエディター(テーマ編集)」から「親テーマ」の「スタイルシート」に入力する

上記の「どれか1つの場所」に「追加CSS」を挿入してください!

ご自身が使っている「ワードプレステーマ」によって「追加できる場所」と「追加できない場所」があります。

①⇒②⇒③の順番で、入力ミスした時の「危険度が高くなる」ので、まずは一番安全な「①の場所」から取り組んでいきましょう!!

「追加CSS」を入力する場所「①つ目」オススメ度★★★

まずは、この方法で「できるかどうか」を試してみよう!

※「外観」⇒「カスタマイズ」⇒「追加CSS」に入力する

「追加CSS」を入力する場所「②つ目」オススメ度★★

①の「追加CSS」が入力できない場合は、この方法を試してみてください!

※「外観」⇒「テーマエディター(テーマ編集)」から「子テーマ」の「スタイルシート」に入力する

「追加CSS」を入力する場所「③つ目」オススメ度★

①と②が両方とも使えない場合は、しょうがないので、この場所に「追加CSS」を挿入しましょう。

※「外観」⇒「テーマエディター(テーマ編集)」から「親テーマ」の「スタイルシート」に入力する

【フル視聴】「ワードプレス使い方」YouTube埋め込み動画をレスポンシブ化させる方法(WordPressプラグイン&CSS書き換え)

フル視聴版はこちらから見られます。

フル視聴版はこちら