YouTube動画をWordPress記事内に
レスポンシブに埋め込む方法を紹介します。

パソコンとスマホどちらで見ても、
画面に合ったサイズでYouTube動画が
表示されるレスポンシブデザインの設定です。

レスポンシブデザインにしないと、
画像が大きすぎて画面がはみ出ていたり、
小さ過ぎても良く見えないなどユーザーに
とって不都合が生じてしまいます。
 

読者の方が見やすいよう、
はみ出すことがなく、かつ、
その端末の最大限のサイズで表示できる
ように設定しましょう。

レスポンシブデザインは必須です。

YouTube動画の埋め込み方法！非レスポンシブデザイン

まず、
レスポンシブデザインではない
単純な埋め込み方法を紹介します。

埋め込みたい動画のYouTubeサイトに
アクセスし、動画の下の方を確認します。

「共有」→「埋め込み」をクリックすると
埋め込みコードを表示させることができます。

これをコピーして、
WordPressの記事内に貼り付ければ、
サイズ固定のYouTube動画を埋め込む
ことができます。
 

ただし、
これだと端末によって
動画のサイズが大き過ぎて
画面からはみ出すことがあります。
 

テーマによっては以下の設定は不要で、
デフォルトでレスポンシブデザインに
なるテーマもあります(Stinger5など)。

一度、
Youtube動画のコードを埋め込んでみて、
どのように表示されるのか確認してみてください。

Google Chromeでは簡単に
スマホ表示が確認できます。
▶ Google Chromeでスマホ表示を確認する方法
 

また、以下のサイトでは、
サイズの異なるスマホやパソコンの画面で
どのように表示されるのかを確認すること
ができます。
▶ http://mattkersley.com/responsive/
 

もし、
レスポンシブデザインになっていないと
以下の様に動画が画面からはみ出てしまいます。

このようにYouTube動画がはみ出ないよう、
端末のサイズ・枠のサイズに合わせて、
自動的に動画サイズを調節してくれるよう
設定します。

WordPress賢威でYouTube動画をレスポンシブ(スマホ)対応にする方法

レスポンシブデザインの
YouTube動画の埋め込み方法を紹介します。

※プラグインは使いません。
 

ダッシュボードの「投稿」
→「新規追加」をクリック。

記事本文内に以下のように入力します。

「★★★」の部分はそれぞれの動画で異なります。次の赤枠部分を入力します。

例えば、動画のURLの末尾。

もしくは
動画下にある埋め込みコードの赤枠部分。

このように入力すれば、
スマホではみ出さない最大限のサイズで
YouTube動画が表示されます。

特に動画のサイズを指定する
必要はありません。

「★★★」部分が
動画によってり異なるだけですので、
上記のコードはAddquicktagで設定
しておくと効率的です。
 

WordPressテーマの賢威では、
このようにYouTube動画を
レスポンシブデザインになるよう
設定されています。

どこに設定されているのか確認します。

ダッシュボードの「外観」
→「テーマ編集」をクリック。

「mobile.css」を確認します。
以下のコードが入力されています。

/*Youtube動画*/
#main-contents .v-wrap{
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 30px;
}

#main-contents .v-wrap iframe,
#main-contents .v-wrap object,
#main-contents .v-wrap embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これを利用すると、
埋め込みコードで指定したサイズが
スマホの画面サイズより大きかった場合、

画面サイズに収まる最大サイズに
調節してくれます。

↓こんな感じですね。

ただし、
この設定はスマホのみの
対応になっています。

つまり、PC表示の時は、
YouTube動画のサイズを
記事枠いっぱいのサイズに
自動調整してくれません。

スマホ同様にパソコン画面でも
動画のサイズを自動調節できるよう
設定していきます。
 

先程、スマホ表示の設定は
「moble.css」でされていましたが、

パソコン表示の設定は
「design.css」で行います。

「moble.css」内に入力されていたコードを
「design.css」の中にもコピーして保存します。

↓これをコピペします

/*Youtube動画*/
#main-contents .v-wrap{
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 30px;
}

#main-contents .v-wrap iframe,
#main-contents .v-wrap object,
#main-contents .v-wrap embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これで
パソコン表示もスマホ表示と同様、
画面サイズ・枠サイズに合わせた
動画サイズに調節されます。

AddQuicktagでYouTube動画の貼り付けを効率化

YouTube動画の貼り付けコードを
AddQuicktagに登録しておくことによって、
記事作成の効率が上がります。

 
以下のように設定しましょう。

※クリックすると拡大します。

 

今回紹介したように、
YouTube動画を画面サイズ・枠サイズ
最大限に表示させることにより、

ユーザーにとって見やすいサイズ
(大き過ぎず小さ過ぎず)になりますので、
ユーザービリティの向上にも繋がります。