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

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

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

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

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

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

これがはみ出てる状態

ポメすけ
盛大にはみ出とるやで。
nino
さっそく解消していこう。

はみ出しを解消しよう

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

参考 CSS:Elastic VideosWEB DESIGNER WALL

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」など)

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

nino
以上、スマホでyoutubeやGoogleMapがはみ出る現象を解決する方法でした。
ポメすけ
お問い合わせや記事リクエストはコチラのお問い合わせフォームからどうぞやで!

あなたにオススメの記事

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です