スマホでyoutubeやGoogleMapがはみ出る現象を解消/WordPress

ブログにyoutubeやGoogleマップを埋め込むことありますよね。

PCでは問題なく表示されているのに、スマホで見るとはみ出てしまうことがあります。

アレコレと調べていたら解消方法を見つけましたので書き残しておきます。

ワードプレスで、テーマはXeory Baseだよ。

※2018年2月から、テーマを「SANGO」に変更してます。

これがはみ出てる状態

盛大にはみ出とるやで。

さっそく解消していこう。

はみ出しを解消しよう

今回、参考にさせていただいた記事はこちらです。

CSSにコードを追記する

スタイルシート（style.css）の最後に以下を追記します。

スタイルシートは、ダッシュボードの「外観」→「テーマの編集」にあります。

/*-- ここから --*/
/*--------------------------------------
  スマホでyoutube等の幅を最適化
--------------------------------------*/
.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%;
}
/*-- ここまで --*/

関連記事＞＞＞初心者のXeory Base子テーマ作り!!追加ソフト不要/Mac

埋め込みコードを挟みこむ

あとは記事を書くときに、埋め込みコードを<div class=”video-container”>と</div>で挟みます。

つまり

<div class=”video-container”>埋め込みコード</div>

と書けばOKです。

ビジュアルエディタではなく、テキストエディタで書いてくださいね。

また、「”」が全角になっていると反映されないので、きちんと半角になっているか確認してください。

ブラウザのキャッシュをクリアしてないと変更したCSSが反映されないことがあるので、キャッシュクリアも試してみましょう。

ちなみに、Googleマップも同様に埋め込みコードを挟めばOKです。

これでもうはみ出ません

すっきり！

プラグインでも対応できるけど…

プラグインで幅を最適化する方法もあるようです。
（たとえば「Advanced Responsive Video Embedder」など）

でも、重くなったり、他のプラグインとの相性もあるので、なるべくプラグインを入れずにカスタマイズしてます。

以上、スマホでyoutubeやGoogleMapがはみ出る現象を解決する方法でした。

お問い合わせや記事リクエストはコチラのお問い合わせフォームからどうぞやで！

あなたにオススメの記事

他にはこんな記事がオススメだよ。