HTML入門:ウェブページをもっと楽しく!動画やマップを追加する方法

HTMLの応用

ウェブページに動画やマップを追加することで、訪問者の興味を引き、情報をよりわかりやすく伝えることができます。ここでは、そんな外部コンテンツの埋め込み方を説明します。

動画を埋め込む

YouTube動画の追加方法

ほとんどの動画共有サービスでは、動画をウェブページに埋め込むためのコードを提供しています。YouTubeでの手順は以下の通りです。

  1. 見たい動画の下にある「共有」ボタンをクリックします。
  2. 「埋め込み」を選んで、表示されるHTMLコードをコピーします。
  3. そのコードをあなたのウェブページのHTMLファイルに貼り付けます。

HTML
<iframe width="560" height="315" src="https://youtu.be/aIgJo99tB6E?si=BnZqTvNYzwHGBmXS" frameborder="0" allowfullscreen></iframe>

この方法で、あなたのウェブページに直接YouTube動画が表示されます。

マップを埋め込む

Googleマップの追加方法

Googleマップを使って、特定の場所の地図をウェブページに追加することができます。

  1. Googleマップで場所を検索します。
  2. 「共有」ボタンをクリックし、「マップを埋め込む」を選択します。
  3. 表示されたHTMLコードをコピーし、ウェブページのHTMLファイルに貼り付けます。

HTML
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8278537075266!2d139.76454987710088!3d35.68124052997145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1711873357190!5m2!1sja!2sjp" width="900" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

これで、ウェブページにGoogleマップが表示されます。

その他の外部コンテンツを追加する

ウェブページには、動画やマップ以外にもさまざまな外部コンテンツを追加することができます。例えば、SNSの投稿、音楽プレイリスト、オンラインフォームなどです。これらを追加する際は、コンテンツ提供元のウェブサイトで埋め込み用のコードを探してください。そして、そのコードをあなたのウェブページに貼り付けるだけです。

まとめ

動画やマップ、その他の楽しいコンテンツをウェブページに追加することで、訪問者にとって魅力的なサイトにすることができます。埋め込みたいコンテンツの提供元から提供されるコードを使って、簡単にウェブページをもっと楽しくしましょう!

コメント

タイトルとURLをコピーしました