ブログにyoutubeやGoogleマップを埋め込むことありますよね。
PCでは問題なく表示されているのに、スマホで見るとはみ出てしまうことがあります。
アレコレと調べていたら解消方法を見つけましたので書き残しておきます。
ワードプレスで、テーマはXeory Baseだよ。
※2018年2月から、テーマを「SANGO」に変更してます。
これがはみ出てる状態
盛大にはみ出とるやで。
さっそく解消していこう。
はみ出しを解消しよう
今回、参考にさせていただいた記事はこちらです。
参考 CSS:Elastic VideosWEB DESIGNER WALLCSSにコードを追記する
スタイルシート（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がはみ出る現象を解決する方法でした。
お問い合わせや記事リクエストはコチラのお問い合わせフォームからどうぞやで！
あなたにオススメの記事
他にはこんな記事がオススメだよ。
最後まで読んでくれてありがとうございました。
追伸！あなたがもし公務員ならの情報が役立つので必ずチェックしてくださいね。
追伸！あなたがもし公務員ならの情報が役立つので必ずチェックしてくださいね。
コメントを残す