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動画の埋め込み方法を紹介します。

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

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

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

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

例えば、動画の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%;
}

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

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

↓こんな感じですね。
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%;
}

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

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

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

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

※クリックすると拡大します。
WordPress ワードプレス 賢威 YouTube 動画 レスポンシブ スマホ Addquicktag
 

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

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

 

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。