FC2ブログにGoogle MapやYoutubeの動画などの埋め込みオブジェクト(iframe)がブログをスマホで見た時に画面からはみ出す問題についての対処方法を覚書
別のブログでよくGoogle MapとYoutubeの動画を記事内に埋め込んでたりするのですが、スマホでブログを見た時に埋め込んだオブジェクトがスマホの画面に入りきらずに横が切れるというか、はみ出してしまいます。
見た目的にあまりよろしくないので、スマホでブログを見た時にはスマホの画面サイズに合わせてサイズを可変させる、いわゆるレスポンシブにする方法を以下に記載します。
iframeで埋め込まれたオブジェクトがスマホで切れる(はみ出す)問題
Google MapやYoutube動画画面を埋め込む際は、<iframe>タグが使用されたhtmlをリンクとして使う形になる。 例えばこんな感じの地図を埋め込むと、
html的には以下の様なhtmlを貼り付けることになります。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14871.1243846948!2d-157.83269825!3d21.28013095!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c006df4e5c129af%3A0x4633ddc52a688878!2z44Ki44Oh44Oq44Kr5ZCI6KGG5Zu9IOODj-ODr-OCpCDjg5vjg47jg6vjg6sg44Ov44Kk44Kt44Kt!5e0!3m2!1sja!2sjp!4v1412235433900" width="400" height="300" frameborder="0" style="border:0"></iframe>
Google MapやYoutube動画を埋め込む場合、Google Mapから<iframe>タグで囲まれた上記のうようなURLをコピーして貼り付けますが、もともとサイズが固定サイズで指定されており、そのサイズよりスマホ画面が小さければ当然画面からはみ出してしまいます。
スマホの画面で見ると、以下のように埋め込んだGoogle Mapの右端がはみ出す。
Youtube動画の場合だとこんな感じです。
これを解決してスマホの画面サイズに合わせて収まるようにサイズをカ変させる方法をこれから説明します。
いわゆる「レスポンシブ・ウェブデザイン」てやつかな。
<iframe>タグで埋め込まれたオブジェクトを画面サイズに合わせて変更する方法
スマホやタブレットの画面サイズに合わせて<iframe>タグで埋め込まれたオブジェクトのサイズを動的に変更する最も簡単な方法は、スマホ用のテンプレートのスタイルシートに以下のスタイル定義を新たに追加します。
<style>
iframe {
max-width: 100%; !important;
}
</style>
スタイルシートにどう追加したらいいかわからない場合は、スマホ用テンプレートの</head>タグの手前に上記のコードをコピーペーストすればよいです。
コピーペーストしたら必ず変更を保存してテンプレートを更新してください。 先ほど見た画面でははみ出ていたGoogle Mapの画像が以下のように画面サイズに収まるように勝手にサイズが変わります。
Youtube動画画面の場合、こんな感じにサイズ変更されます。
とりあえずは、これでスマホ画面のサイズに合わせて埋め込んだオブジェクトのサイズが自動的に調整されるのですが、単純に画面サイズに合わせて幅を100%にしているだけなのでなんとなく縦に間延びした感じになってしまいます。
これで十分というのであれば、これでよいですが、やっぱり元々のオブジェクトの縦横比率に合わせた上でスマホ画面のサイズに合わせて自動調整したいなぁ、と思ったりもします。
色々と試したのですが、スマホ画面では綺麗に表示されるものの、PC画面では変な空間というか空白が入ってしまったりうまくいかないので、うまく出来るようになったらこの記事に追記するか別の記事として書きたいと思います。
画面比率をそのままにレスポンシブにする方法について
本記事の方法よりも若干面倒にはなりますが、元々の画面の比率(解像度、アスペクト比)に合わせてレスポンシブ対応させる方法については、以下の記事にに詳しく記載しましたので参考にしてください。
コメント