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

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

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

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

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

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

クリックできる目次

これがはみ出てる状態

盛大にはみ出とるやで。

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

はみ出しを解消しよう

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

参考 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%;
}
/*-- ここまで --*/

注意

作業前に「子テーマ」を作って、バックアップしておきましょう。