レスポンシブiframe（YouTube、Googleマップなど）

レスポンシブiframe（YouTube、Googleマップなど）: 用途

YouTubeやGoogleマップの埋め込みコードは幅と高さが固定で、スマートフォンの画面からはみ出します。iframeまたはアドレスだけを貼り付けると、幅100%を使い、aspect-ratioで比率を保つバージョンが得られます。

ツールは、YouTube（9:16のShortsを含む）、Googleマップ、Vimeo、Spotify、Instagram、Canva、Googleフォームを認識し、適切な比率や高さを提案します。loading=lazy、スクリーンリーダー用のtitle、全画面表示を追加し、幅を狭めてスマートフォンでの見え方を確認できるプレビューも表示します。

使い方

1. iframeまたはアドレスを貼り付けます。
2. 比率とtitleを確認します。
3. コードをサイトにコピーします。

使うタイミング

• トップページのYouTube動画。
• お問い合わせページのGoogleマップ。
• Spotifyのプレーヤーや埋め込みフォーム。

よくある質問

iframeがスマートフォンではみ出すのはなぜですか？

埋め込みコードには、560×315のように固定のwidthとheightが入っています。幅360pxのスマートフォンでは、動画が画面より大きくなります。ここで生成するコードは幅100%とaspect-ratioプロパティを使い、どの画面でも比率を保ちます。

loading=lazyは何をしますか？

ブラウザーは、iframeが画面に表示される直前になって初めて読み込みます。動画や地図は重いため、ページの下のほうにある場合は、ページの読み込みがかなり速くなります。

iframeのtitleは何のためにありますか？

スクリーンリーダーはtitleを読み上げて、iframeの中身を伝えます。たとえば「動画：お店への行き方」のようにです。titleがないと、「フレーム」としか聞こえず、何なのか分かりません。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール