Iframe on qwerty.work

Googleマップ埋め込みタグのiframe書式例まとめ

Sat, 14 Aug 2021 13:05:14 +0900

書式例

赤田海水浴場の地図を表示する例

通常例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26355.54307992571!2d130.87437829737954!3d34.339204853827596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543123bc72ce0c3%3A0x3d98f38cb01c0f43!2z6LWk55Sw5rW35rC05rW05aC0!5e0!3m2!1sja!2sjp!4v1628905054118!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

キーワードで指定するシンプルな例

<iframe src="https://maps.google.co.jp/maps?output=embed&q=赤田海水浴場&z=15" width="100%" height="450"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>

パラメーター参考

https://www.bricoleur.co.jp/blog/archives/4452 https://www.bricoleur.co.jp/blog/archives/4452

https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7 https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7

留意点

AMPページではwidth="100%"はエラーになるので、width="600"のようにピクセルで指定する必要があります。

layout="responsive"も加えておくと良いみたいです。（以下参考）

https://qiita.com/otsuky/items/9254065d41598cb242ce https://qiita.com/otsuky/items/9254065d41598cb242ce

その他参考

https://developers.google.com/maps/documentation/urls/get-started https://developers.google.com/maps/documentation/urls/get-started

https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b

YoutTubeの埋め込みIFLAMEをレスポンシブ対応するCSS

Sat, 23 May 2020 13:56:06 +0900

モバイルページではYouTubeの画面がはみ出る

最近はページにYouTubeの動画を埋め込むことが増えてきました。スマホでそのページを見たときに動画の画面がはみ出ていたので自動的に幅に合わせて表示を変えてくれるレスポンシブに対応する方法を探しました。CSS（スタイルシート）で簡単にできることがわかったのでメモ。

まずは埋め込みタグをで囲む

YouTubeの埋め込みタグを以下のように``で囲みます。

ついでにloading="lazy"を加えて遅延表示対応しています。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/j1fyn12NH5s" frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>

ちなみに以下の動画は随分前の森永ミルクキャラメルのCMで最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。

予備動画 1 2

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

以前はpadding-top: 56.25%;を使って16:9の縦横比（アスペクト比）に合わせてレスポンシブ対応していましたが、ここ最近ではaspect-ratioがほとんどのモダンブラウズで使えるようになり、簡単にできるようになったみたいです。

ソース例

.youtube {
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}

または

iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

後述の従来のposition: relative;とposition: absolute;とpadding-top: 56.25%;を組合せて使うより簡単でいいですね。

参考サイト

aspect-ratioとobject-fit: cover;について、以下のページが参考になりました。

https://moshashugyo.com/media/aspect-ratio https://moshashugyo.com/media/aspect-ratio

https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html

ブラウザの対応状況

https://caniuse.com/mdn-css_properties_aspect-ratio https://caniuse.com/mdn-css_properties_aspect-ratio

https://caniuse.com/?search=object-fit https://caniuse.com/?search=object-fit

従来のpadding-top: 56.25%;を使用する方法

You-Tubeの埋め込みのサイズでよくあるwidth="560" height="315"の指定があってもページ幅最大に動画を表示するaspect-ratioを使わない従来の方法。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレスポンシブ表示されます。aspect-ratioを使用するより、コードが多いのですが、IEなど古いブラウザ対応が必要な場合はこちらを使うことが必要になります。

ソース例

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

4:3の場合 padding-bottom: 75%;
16:9の場合 padding-bottom: 56.25%;
padding-bottomはpadding-topでも可。

padding-bottom: 56.25%;は16:9の幅16を100％にしたときの高さ9がナンバーセントの比率かを意味するかを意味しています。以下のページが参考になります。これを入れないとwidth: 100%;だけだと高さは変わらず、横だけがレスポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレスポンシブ表示する対応方法となっています。

参考ページ

https://h2ham.net/youtube-responsive/ https://h2ham.net/youtube-responsive/

従来の方法でスマホ用にちょっと手を加えた例

スマホなどのモバイルページではレスポンシブ表示して、PCなどは大きくなりすぎないように、埋め込みコードの指定通りwidth="560" height="315"で表示する場合の例です。私の場合、埋め込みコードの幅560ピクセルに合わせて、最大559ピクセルまでの解像度でアクセスした場合はレスポンシブ表示するようにしました。

@media screen and (max-width:559px){
   .youtube {
	   position: relative;
	   width: 100%;
	   padding-top: 56.25%;
	   margin: 0.5em 0 1em;
   }
   .youtube iframe {
	   position: absolute;
	   top: 0;
	   right: 0;
	   width: 100% !important;
	   height: 100% !important;
   }
}

動画を連続して埋め込んだときのためにmargin: 0.5em 0 1em;を加えて、上下に余白を入れて動画同士の間に隙間を作るようにしました。

試しにこのページを560px以下の解像度のスマホで見ていただければYouTube動画が幅いっぱいに収まっているはずです。

その他参考ページ

https://design.webclips.jp/youtube-movie-size/ https://design.webclips.jp/youtube-movie-size/

https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

Tue, 09 May 2017 19:42:31 +0900

MovableTypeのブログをAMP対応にするため、AmpConvertというプラグインを入れています。You-Tube埋め込み用のiframeタグはamp-youtubeに変換してくれますが。それ以外のiframeタグはamp-frameにしてくれませんでした。

そこでテンプレート側で正規表現で置き換える方法で対応したのでメモ。

例えばGoogle Maps

例えばGoogleマップの地図をページを埋め込むためのタグが以下だったとします。

<iframe src="https://www.google.com/maps/embed?mid=0123456789" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

このを以下のようにしたいのです。

<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://www.google.com/maps/d/embed?mid=mid=0123456789" width="640" height="480"></amp-iframe>

AMP用テンプレートのソース

MovableTypeのAMP用に作ったテンプレートの本文の部分を以下のようにしました。

<mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work">
    <$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
    <$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>
    <mt:For regex_replace="$regex">
        <mt:EntryBody>
        <mt:EntryMore>
    </mt:For>
</mt:AmpConvert>

以下が正規表現でiframeをamp-iframeに置換前と置換後を指定している部分です。

<$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
<$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>

Googleマップの場合、amp-iframeに置き換えるだけなく、**sandbox=“allow-scripts allow-same-origin allow-popups”**がないとAMPページで地図が表示されませんでした。

Iframe on qwerty.work

Googleマップ埋め込みタグのiframe書式例まとめ

書式例

通常例

キーワードで指定するシンプルな例

パラメーター参考

留意点

その他参考

YoutTubeの埋め込みIFLAMEをレスポンシブ対応するCSS

モバイルページではYouTubeの画面がはみ出る

まずは埋め込みタグをで囲む

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

ソース例

参考サイト

ブラウザの対応状況

従来のpadding-top: 56.25%;を使用する方法

ソース例

参考ページ

従来の方法でスマホ用にちょっと手を加えた例

その他参考ページ

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

例えばGoogle Maps

AMP用テンプレートのソース

sandboxについては以下参考