YouTubeの埋め込みをスマホサイズと中央寄せにする方法!

スクリーンショット 2016-02-16 22.00.27

 

YouTube動画を自分のサイトに埋め込んだはいいが、どうもサイズがおかしい…中央に寄せたい…スマホだと画面がはみ出てる..

なんてことはないでしょうか?

今回ご紹介する方法はYouTubeの埋め込み動画をサイトならちゃんと中央寄せにスマホなら適切なスマホサイズする方法をご紹介します。

簡単なコードでスマホサイズに最適化!

YouTubeの埋め込み動画をスマホサイズに最適化するプラグインもありますが、それを使う事なくできるので、是非やってみてください。

 

まず普通にYouTubeの動画を埋め込むと以下のような感じになります。

 

スクリーンショット 2016-02-16 22.14.39

 

 

PCの方は全画面に表示されていますが、サイトの左寄りになってしまっています。

一方、スマホは完全にはみ出てしまっています。

(再生すれば全画面になりますが、サイトの見栄え上良くないです)

 

これを同時にキレイな見栄えにする場合は以下のコードを記述します。

 

<div class=”v-wrap”><div style=”text-align: center;”>埋め込みコード</div></div>

 

たったこれだけでPCもスマホもきれなサイズで表示することができます。

 

スクリーンショット 2016-02-16 22.23.01

PCは横幅を420から600に変えていますが、どのサイズに変えてもスマホ対応にはなります。

 

先ほどのよりもかなり見栄えも良くきれいですよね!

コードは長いのでAdd Quicktag(プラグイン)を導入して登録しておけばボタン一つで呼び出すことができます。

 

ぜひともサイトにYouTube動画を埋め込む際には利用してみてくださいね!

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ