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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.video {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%;
     height: 0;
}
 
.video iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フル視聴版はこちら