YouTubeやGoogleマップがスマホからはみ出る場合の対策方法

トレンドアフィリエイトを実践する場合、
記事の中にYouTubeの動画を埋め込む場合もありますよね？

また、イベント系の記事の場合は、
Googleマップを埋め込む場合もあるのではないでしょうか？

YouTubeの動画やGoogleマップを記事の中に埋め込む場合、
気を付けなければいけないことがあります。

それは、スマホからの見え方です。

YouTubeの動画やGoogleマップが埋め込まれた記事を、
スマホから見た場合、
スマホの画面からはみ出してしまう場合があるんです。

こちらを見てみてください。
　

YouTubeの動画が右側にはみ出してしまっているのがわかると思います。

また、こちらを見てみてください。
　

Googleマップが右側にはみ出してしまっていますよね。

このように、YouTubeの動画やGoogleマップを
記事の中に埋め込むと、スマホから見た場合、
スマホの画面からはみ出してしまう場合があるんです。

この場合、見た目も悪いですし、
動画の再生ボタンが押せなかったり、画面が左右に動いてしまったりと、
不都合なことも発生してしまいます。

せっかくサイトにアクセスがあっても、こんな風に表示されていたら、
サイトから離脱されてしまうことにもなりかねません。

大きな機会損失になってしまうこともあるんですね。

ですので、スマホから見ても、
YouTubeの動画やGoogleマップがはみ出してしまわないように、
対策をする必要があるんです。

YouTubeやGoogleマップがスマホからはみ出る場合の対策方法

YouTubeやGoogleマップがスマホからはみ出る場合の対策方法としては、
CSSとHTMLタグの２つを設定する必要があります。

まずは、CSSコードからですね。

スタイルシートに下記のコードを記載してください。

ワードプレスの場合、
ダッシュボードメニューの外観→テーマエディタ→スタイルシートの中の
一番下の空いている場所に記載しましょう。

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これで準備は完了です。

あとは、YouTubeやGoogleマップを埋め込む場合に、
埋め込みタグを<div class="video-container">と<⁄div>で挟むだけです。

<div class="video-container"><YouTube動画の埋め込みタグ><⁄div>

<div class="video-container"><Googleマップの埋め込みタグ><⁄div>

これで、スマホから確認した場合でも、
画面内にYouTubeやGoogleマップがきれいに収まりますよ。

スマホから見た際に、YouTubeやGoogleマップががはみ出していれば、
機会損失になってしまうこともありますので、
今回ご紹介させていただいた方法で、きっちりと対策しておきましょう。