iframeでPDF・Googleマップ・YouTubeをカード内に表示する方法

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>PDFをiframeで表示</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- =========================================
       PDFの埋め込み

       【PDFファイルの準備】
       1. 表示したいPDFファイルを用意します。
       2. sampleフォルダ内にpdfフォルダを作成します。
       3. pdfフォルダ内にsample.pdfを配置します。
       4. ファイル名や保存場所を変更する場合は、
          src属性のパスも変更してください。

       ※PDFファイルはZIPに含まれません。
  ========================================= -->

  <div class="iframe-embed_pdf">

    <iframe
      class="iframe-embed_pdf-frame"
      src="pdf/sample.pdf"
      title="PDFサンプル"
      loading="lazy">
    </iframe>

  </div>

</body>

</html>

/* =========================================
   PDFの埋め込み
========================================= */

/* PDFの表示領域 */
.iframe-embed_pdf {
  width: 100%; /* 親要素の横幅いっぱいに表示 */
  max-width: 800px; /* 最大横幅。値を大きくすると表示領域が広がる */
  margin: 0 auto; /* 左右中央に配置 */
}

/* PDFのiframe */
.iframe-embed_pdf-frame {
  display: block; /* iframeの下にできる余分な隙間を防ぐ */
  width: 100%; /* 表示領域の横幅いっぱいに表示 */
  height: 400px; /* 表示の高さ。値を大きくすると縦に広がる */
  border: 1px solid #dbe3ee; /* 枠線の太さ・種類・色 */
  border-radius: 10px; /* 角丸。値を大きくすると丸みが強くなる */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を横幅・高さに含める */
}

/* =========================================
   スマートフォン
========================================= */

@media (max-width: 640px) {

  /* PDFのiframe */
  .iframe-embed_pdf-frame {
    height: 300px; /* 画面幅640px以下で高さを300pxに変更 */
  }

}

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Googleマップをiframeで表示</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- =========================================
       Googleマップの埋め込み

       【埋め込みURLの取得方法】
       1. Googleマップで表示したい場所を検索します。
       2. 「共有」をクリックします。
       3. 「地図を埋め込む」を選択します。
       4. 「HTMLをコピー」をクリックします。
       5. コピーしたiframeコードのsrc属性から
          埋め込みURLを取得します。
       6. YOUR_GOOGLE_MAP_EMBED_URLを
          取得したURLに置き換えてください。

       ※URLに&が含まれる場合は、
         HTML内では&amp;と記述してください。
       ※Google Maps JavaScript APIや
         APIキーは使用しません。
  ========================================= -->

  <div class="iframe-embed_map">

    <iframe
      class="iframe-embed_map-frame"
      src="YOUR_GOOGLE_MAP_EMBED_URL"
      title="Googleマップ"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>

  </div>

</body>

</html>

/* =========================================
   Googleマップの埋め込み
========================================= */

/* Googleマップの表示領域 */
.iframe-embed_map {
  width: 100%; /* 親要素の横幅いっぱいに表示 */
  max-width: 800px; /* 最大横幅。値を大きくすると表示領域が広がる */
  margin: 0 auto; /* 左右中央に配置 */
}

/* Googleマップのiframe */
.iframe-embed_map-frame {
  display: block; /* iframeの下にできる余分な隙間を防ぐ */
  width: 100%; /* 表示領域の横幅いっぱいに表示 */
  height: 400px; /* 地図の高さ。値を大きくすると縦に広がる */
  border: 1px solid #dbe3ee; /* 枠線の太さ・種類・色 */
  border-radius: 10px; /* 角丸。値を大きくすると丸みが強くなる */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を横幅・高さに含める */
}

/* =========================================
   スマートフォン
========================================= */

@media (max-width: 640px) {

  /* Googleマップのiframe */
  .iframe-embed_map-frame {
    height: 300px; /* 画面幅640px以下で高さを300pxに変更 */
  }

}

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>YouTube動画をiframeで表示</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- =========================================
       YouTube動画の埋め込み

       【動画IDの取得方法】
       1. YouTubeで表示したい動画を開きます。
       2. 「共有」から動画のURLをコピーします。
       3. 通常の動画URLでは、
          watch?v=の後ろにある文字列が動画IDです。
       4. 短縮URLでは、
          youtu.be/の後ろにある文字列が動画IDです。
       5. YOUR_VIDEO_IDを取得した動画IDに
          置き換えてください。

       ※URL全体ではなく動画IDだけを設定します。
       ※埋め込みが許可されている動画を使用してください。
  ========================================= -->

  <div class="iframe-embed_youtube">

    <iframe
      class="iframe-embed_youtube-frame"
      src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
      title="YouTube動画"
      loading="lazy"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen>
    </iframe>

  </div>

</body>

</html>

/* =========================================
   YouTube動画の埋め込み
========================================= */

/* YouTube動画の表示領域 */
.iframe-embed_youtube {
  width: 100%; /* 親要素の横幅いっぱいに表示 */
  max-width: 800px; /* 最大横幅。値を大きくすると表示領域が広がる */
  margin: 0 auto; /* 左右中央に配置 */
  aspect-ratio: 16 / 9; /* 動画の縦横比。16:9で表示 */
}

/* YouTube動画のiframe */
.iframe-embed_youtube-frame {
  display: block; /* iframeの下にできる余分な隙間を防ぐ */
  width: 100%; /* 表示領域の横幅いっぱいに表示 */
  height: 100%; /* 親要素の高さに合わせて16:9を維持 */
  border: 1px solid #dbe3ee; /* 枠線の太さ・種類・色 */
  border-radius: 10px; /* 角丸。値を大きくすると丸みが強くなる */
  background: #ffffff; /* 背景色 */
  box-sizing: border-box; /* 枠線を横幅・高さに含める */
}