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

YouTube埋め込み動画のレスポンシブ対応(WordPressプラグイン&CSS書き換え)

 

【2パターン】YouTube埋め込み動画のレスポンシブ対応(CSS書き換え or WordPressプラグイン)

WordPress埋め込み動画のレスポンシブ対応
①YouTubeやGoogleマップ等でコピーした「埋め込みタグ(iframe)」を「div」の要素で囲み、②WordPressの「カスタマイズ」もしくは「テーマエディター」から、囲んだ「div」に対して、レスポンシブ対応のCSSを追加します。

矢印

方法は「2パターン」ある

  1. 【パターンA】追加CSSで書き換える方法
  2. 【パターンB】WordPressプラグインで書き換える方法

【パターン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プラグイン

【パターンB】WordPressプラグインで書き換える方法

2種類のプラグインをWordPressにインストールする

最初に下の2つの「プラグイン」を「WordPress(ワードプレス)」にインストールしておきましょう!

プラグイン【1つ目】
ARVE Advanced Responsive Video Embedder
プラグイン【2つ目】
Shortcake

「ARVE Advanced Responsive Video Embedder」のインストール

 

「Shortcake」のインストール

 

 

項目内容
URL / Embed Code埋め込みたい動画のURL(短縮URLなど)を入力する。
Mode動画の読み込み設定。標準はnormalのみ、PROプランでLazy Loadモードが設定可能。
Alignment動画の配置を設定できる。
ARVE LinkARVEのプロモーションリンクが表示される。
ThumbnailLazy Loadモードにしたときのプレビュー用画像。レンダリングの遅延を防ぎ、SEO対策にもなる。
Title構造化データのためのTitleが設定できる。schema.orgのitemprop=”name”プロパティを使用する。
Description構造化データのためのDescriptionが設定できる。schema.orgのitemprop=”description”プロパティを使用する。
Upload Date構造化データのためのUpload Dateが設定できる。schema.orgのitemprop=”uploadDate”プロパティを使用する。
Duration構造化データのためのDurationが設定できる。schema.orgのitemprop=”Duration”プロパティを使用する。
Autoplay自動再生設定が可能。
Maximal Width横幅の最大値を設定可能。
Aspect Ratioアスペクト比が設定可能。
ParametersYouTubeやDailymotionなどが提供しているパラメータが設定可能。
Chrome HTML5 Player controlsGoogle chromeで閲覧した際に、HTML5の<video>タグの設定が可能。
mp4 filemp4ファイルがアップロードできる。
webm filewebmファイルがアップロードできる。
ogv fileogvファイルがアップロードできる。
Show Controls?<video>タグで埋め込んだ際にコントールバーを表示するか設定できる。
Loop?<video>タグで埋め込んだ際にループ設定が可能。
Mute?<video>タグで埋め込んだ際にミュート設定が可能。

 

 

項目内容
Mode動画の読み込み設定。標準はnormalのみ、PROプランでLazy Loadモードが設定可能。
Alignment動画の配置を設定できる。
ARVE LinkARVEのプロモーションリンクが表示される。
Autoplay自動再生設定が可能。
Maximal Width横幅の最大値を設定可能。
Align Maximal Widthキャッシュデータの保存時間を設定できる。
Use ARVE for HTML5 video embedsARVEを使用してHTML5ビデオファイルを埋め込める。
Chrome HTML5 Player controlsGoogle chromeで閲覧した際に、HTML5の<video>タグの設定が可能。
Assent loadingAjax経由の読み込みなど、うまく動画が読み込まれない場合に設定する。
Use youtube-nocookie.com url?YouTubeのプライバシー強化モードを設定できる。
Video API TokenRandom Video Addonを使用する際に必要なAPI Tokenを設定できる。