スポンサードリンク
【2パターン】YouTube埋め込み動画のレスポンシブ対応（CSS書き換え or WordPressプラグイン）
方法は「2パターン」ある
- 【パターンA】追加CSSで書き換える方法
- 【パターンB】WordPressプラグインで書き換える方法
【パターン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つを実行】
- 「外観」⇒「カスタマイズ」⇒「追加CSS」に入力する
- 「外観」⇒「テーマエディター（テーマ編集）」から「子テーマ」の「スタイルシート」に入力する
- 「外観」⇒「テーマエディター（テーマ編集）」から「親テーマ」の「スタイルシート」に入力する
上記の「どれか1つの場所」に「追加CSS」を挿入してください！
ご自身が使っている「ワードプレステーマ」によって「追加できる場所」と「追加できない場所」があります。
①⇒②⇒③の順番で、入力ミスした時の「危険度が高くなる」ので、まずは一番安全な「①の場所」から取り組んでいきましょう！！
「追加CSS」を入力する場所「①つ目」オススメ度★★★
まずは、この方法で「できるかどうか」を試してみよう！
[arve url=”https://youtu.be/H7eMVXMd7_Y” title=”YouTube埋め込み動画をレスポンシブ化させる方法（WordPressプラグイン＆CSS書き換え）【3/6】” loop=”no” muted=”no” /]※「外観」⇒「カスタマイズ」⇒「追加CSS」に入力する
「追加CSS」を入力する場所「②つ目」オススメ度★★
①の「追加CSS」が入力できない場合は、この方法を試してみてください！
[arve url=”https://youtu.be/A49uBjdCDJ4″ title=”YouTube埋め込み動画をレスポンシブ化させる方法（WordPressプラグイン＆CSS書き換え）【4/6】” loop=”no” muted=”no” /]※「外観」⇒「テーマエディター（テーマ編集）」から「子テーマ」の「スタイルシート」に入力する
「追加CSS」を入力する場所「③つ目」オススメ度★
①と②が両方とも使えない場合は、しょうがないので、この場所に「追加CSS」を挿入しましょう。
[arve url=”https://youtu.be/cs6-iz7J05k” title=”YouTube埋め込み動画をレスポンシブ化させる方法（WordPressプラグイン＆CSS書き換え）【5/6】” loop=”no” muted=”no” /]※「外観」⇒「テーマエディター（テーマ編集）」から「親テーマ」の「スタイルシート」に入力する
【ワードプレス】YouTube埋め込み動画をレスポンシブ対応させるWordPressプラグイン
【パターンB】WordPressプラグインで書き換える方法
2種類のプラグインをWordPressにインストールする
最初に下の2つの「プラグイン」を「WordPress（ワードプレス）」にインストールしておきましょう！
「ARVE Advanced Responsive Video Embedder」「Shortcake」のインストール
[arve url=”https://youtu.be/ncCTw0xI84M” title=”YouTube埋め込み動画をレスポンシブ化させる方法（WordPressプラグイン＆CSS書き換え）【6/6″ loop=”no” muted=”no” /]ARVE Advanced Responsive Video Embedderの各項目
ARVE Advanced Responsive Video Embedderの各項目を「日本語」で解説しました。
| 項目 | 内容 |
|---|---|
| URL / Embed Code | 埋め込みたい動画のURL（短縮URLなど）を入力する。 |
| Mode | 動画の読み込み設定。標準はnormalのみ、PROプランでLazy Loadモードが設定可能。 |
| Alignment | 動画の配置を設定できる。 |
| ARVE Link | ARVEのプロモーションリンクが表示される。 |
| Thumbnail | Lazy 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 | アスペクト比が設定可能。 |
| Parameters | YouTubeやDailymotionなどが提供しているパラメータが設定可能。 |
| Chrome HTML5 Player controls | Google chromeで閲覧した際に、HTML5の<video>タグの設定が可能。 |
| mp4 file | mp4ファイルがアップロードできる。 |
| webm file | webmファイルがアップロードできる。 |
| ogv file | ogvファイルがアップロードできる。 |
| Show Controls? | <video>タグで埋め込んだ際にコントールバーを表示するか設定できる。 |
| Loop? | <video>タグで埋め込んだ際にループ設定が可能。 |
| Mute? | <video>タグで埋め込んだ際にミュート設定が可能。 |
| 項目 | 内容 |
|---|---|
| Mode | 動画の読み込み設定。標準はnormalのみ、PROプランでLazy Loadモードが設定可能。 |
| Alignment | 動画の配置を設定できる。 |
| ARVE Link | ARVEのプロモーションリンクが表示される。 |
| Autoplay | 自動再生設定が可能。 |
| Maximal Width | 横幅の最大値を設定可能。 |
| Align Maximal Width | キャッシュデータの保存時間を設定できる。 |
| Use ARVE for HTML5 video embeds | ARVEを使用してHTML5ビデオファイルを埋め込める。 |
| Chrome HTML5 Player controls | Google chromeで閲覧した際に、HTML5の<video>タグの設定が可能。 |
| Assent loading | Ajax経由の読み込みなど、うまく動画が読み込まれない場合に設定する。 |
| Use youtube-nocookie.com url? | YouTubeのプライバシー強化モードを設定できる。 |
| Video API Token | Random Video Addonを使用する際に必要なAPI Tokenを設定できる。 |
動画のフル視聴版はこちら
[arve url=”https://youtu.be/mGl2jBtNxcM” title=”【WordPress使い方】YouTube埋め込み動画をレスポンシブ化させる/プラグイン/ARVE Advanced Responsive Video Embedder/Shortcake/追加CSS” loop=”no” muted=”no” /]
