WordPress賢威でYouTube動画をレスポンシブ(スマホ)対応！プラグインは不要？

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

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

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

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

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

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

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

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

「共有」→「埋め込み」をクリックすると
埋め込みコードを表示させることができます。
WordPress　賢威　YouTube　動画　レスポンシブ　スマホ　共有

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

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

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

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

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

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

もし、
レスポンシブデザインになっていないと
以下の様に動画が画面からはみ出てしまいます。
WordPress　ワードプレス　賢威　YouTube　動画　レスポンシブ　スマホ　動画がはみ出る

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

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

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

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

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

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

<div class="v-wrap"><iframe src="https://www.youtube.com/embed/★★★" frameborder="0"></iframe></div>

1	<div class="v-wrap"><iframe src="https://www.youtube.com/embed/★★★" frameborder="0"></iframe></div>

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

例えば、動画のURLの末尾。
WordPress　賢威　YouTube　動画　レスポンシブ　スマホ　URL

もしくは
動画下にある埋め込みコードの赤枠部分。
WordPress　賢威　YouTube　動画　レスポンシブ　スマホ　共有

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

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

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

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

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

ダッシュボードの「外観」
→「テーマ編集」をクリック。
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%;
}

/*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%;

}

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

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

↓こんな感じですね。
WordPress　ワードプレス　賢威　YouTube　動画　レスポンシブ　スマホ　画面サイズに合わせる

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

つまり、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%;
}