iFrame & Embed Eksternal

iFrame & Embed Eksternal 🌐

iFrame adalah jendela di dalam halaman web — memungkinkan kita menyematkan halaman web lain, video, peta, atau konten eksternal langsung di dalam halaman kita sendiri, seolah-olah konten tersebut menjadi bagian dari halaman kita.

Struktur Dasar

Tag untuk membuat iFrame adalah <iframe>:

<iframe src="https://www.example.com" width="800" height="500"></iframe>

Berbeda dengan <img> atau <audio>, <iframe> memiliki tag pembuka dan penutup. Konten di antara keduanya hanya tampil jika browser tidak mendukung iFrame (sebagai fallback):

<iframe src="https://example.com" width="800" height="500">
  Browser Anda tidak mendukung iFrame.
</iframe>

Atribut-Atribut <iframe>

<iframe
  src="https://example.com"
  width="800"
  height="500"
  title="Deskripsi konten iframe"
  frameborder="0"
  allowfullscreen
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
>
</iframe>

Embed Google Maps 🗺️

Penggunaan paling umum iFrame adalah menyematkan peta Google Maps:

Cara mendapatkan kode embed:

1. Buka Google Maps
2. Cari lokasi yang diinginkan
3. Klik Share → Embed a map
4. Salin kode iFrame yang tersedia

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3960.0!2d110.4!3d-7.0!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zSm9nbGkh5a!5e0!3m2!1sid!2sid!4v1234567890"
  width="100%"
  height="400"
  style="border: 0; border-radius: 12px;"
  allowfullscreen
  loading="lazy"
  title="Lokasi kantor kami di Semarang"
  referrerpolicy="no-referrer-when-downgrade"
>
</iframe>

Embed YouTube 🎬

YouTube menyediakan kode embed resmi untuk setiap video:

Cara mendapatkan kode embed:

1. Buka video di YouTube
2. Klik Share → Embed
3. Salin kode iFrame yang tersedia

<!-- Embed standar -->
<iframe
  width="800"
  height="450"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Tutorial HTML Dasar untuk Pemula"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
>
</iframe>

Parameter tambahan yang bisa ditambahkan ke URL:

<!-- Mulai dari detik ke-30, tanpa related video di akhir -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?start=30&rel=0"
  width="800"
  height="450"
  frameborder="0"
  allowfullscreen
  title="Tutorial HTML"
>
</iframe>

Embed Google Docs, Sheets & Slides 📄

Dokumen Google bisa langsung disematkan ke halaman web:

Google Docs:

<iframe
  src="https://docs.google.com/document/d/DOCUMENT_ID/pub?embedded=true"
  width="100%"
  height="600"
  frameborder="0"
  title="Dokumen panduan penggunaan"
>
</iframe>

Google Sheets:

<iframe
  src="https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/pubhtml?widget=true&headers=false"
  width="100%"
  height="500"
  frameborder="0"
  title="Tabel data penjualan"
>
</iframe>

Google Slides:

<iframe
  src="https://docs.google.com/presentation/d/PRESENTATION_ID/embed?start=false&loop=false&delayms=3000"
  width="800"
  height="479"
  frameborder="0"
  allowfullscreen
  title="Presentasi profil perusahaan"
>
</iframe>

Embed Figma 🎨

Desain Figma bisa disematkan langsung di halaman web:

<iframe
  style="border: 1px solid rgba(0, 0, 0, 0.1);"
  width="800"
  height="600"
  src="https://www.figma.com/embed?embed_host=share&url=FIGMA_URL"
  allowfullscreen
  title="Desain UI aplikasi mobile"
>
</iframe>

Embed Spotify 🎵

Playlist atau lagu dari Spotify:

<!-- Embed lagu -->
<iframe
  style="border-radius: 12px;"
  src="https://open.spotify.com/embed/track/TRACK_ID?utm_source=generator"
  width="100%"
  height="152"
  frameborder="0"
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy"
  title="Lagu dari Spotify"
>
</iframe>

<!-- Embed playlist -->
<iframe
  style="border-radius: 12px;"
  src="https://open.spotify.com/embed/playlist/PLAYLIST_ID?utm_source=generator"
  width="100%"
  height="380"
  frameborder="0"
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy"
  title="Playlist belajar coding"
>
</iframe>

Atribut sandbox — Keamanan iFrame

sandbox adalah atribut keamanan yang membatasi kemampuan konten di dalam iFrame. Tanpa nilai apapun, semua fitur diblokir:

<!-- Semua fitur diblokir -->
<iframe src="https://example.com" sandbox></iframe>

Izinkan fitur tertentu dengan menambahkan nilai:

<iframe 
  src="https://example.com" 
  sandbox="allow-scripts allow-same-origin allow-forms"
>
</iframe>

iFrame Responsif

iFrame secara default tidak responsif. Gunakan teknik padding-bottom untuk mempertahankan rasio aspek:

<style>
  /* Container responsif 16:9 */
  .iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;    /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Container responsif untuk peta — rasio bebas */
  .map-container {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
  }

  .map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<!-- Video YouTube responsif -->
<div class="iframe-container">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Tutorial HTML"
    allowfullscreen
  ></iframe>
</div>

<!-- Peta responsif -->
<div class="map-container">
  <iframe
    src="https://www.google.com/maps/embed?..."
    allowfullscreen
    loading="lazy"
    title="Lokasi kantor"
  ></iframe>
</div>

Atribut referrerpolicy

Mengontrol informasi referrer yang dikirimkan saat mengakses konten iFrame:

<iframe
  src="https://example.com"
  referrerpolicy="no-referrer-when-downgrade"
  title="Konten eksternal"
>
</iframe>

Hal yang Perlu Diperhatikan

1. Tidak semua website bisa di-embed

Banyak website memblokir embed melalui header X-Frame-Options atau Content-Security-Policy. Jika iFrame menampilkan halaman kosong atau error, kemungkinan website tersebut memblokir embed:

Refused to display 'https://example.com' in a frame because
it set 'X-Frame-Options' to 'SAMEORIGIN'.

Website seperti Google, Facebook, Twitter tidak bisa di-embed secara langsung.

2. Performa

Setiap iFrame memuat seluruh halaman web baru secara terpisah — ini bisa memperlambat halaman jika terlalu banyak iFrame. Gunakan loading="lazy" untuk iFrame yang tidak langsung terlihat:

<iframe src="https://example.com" loading="lazy" title="Konten"></iframe>

3. Aksesibilitas — atribut title wajib

Screen reader tidak bisa mengetahui isi iFrame tanpa atribut title. Selalu cantumkan deskripsi yang bermakna:

<!-- KURANG BAIK -->
<iframe src="https://www.youtube.com/embed/xxx"></iframe>

<!-- BAIK -->
<iframe 
  src="https://www.youtube.com/embed/xxx"
  title="Tutorial cara membuat halaman web pertama dengan HTML"
>
</iframe>

Contoh Halaman dengan Berbagai Embed

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman dengan Embed</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 900px;
      margin: 0 auto;
      padding: 24px;
    }

    section {
      margin-bottom: 48px;
    }

    h2 {
      border-left: 4px solid #4a9eed;
      padding-left: 12px;
      margin-bottom: 16px;
    }

    .video-wrapper {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      border-radius: 12px;
      overflow: hidden;
    }

    .video-wrapper iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border: 0;
    }

    .map-wrapper {
      height: 400px;
      border-radius: 12px;
      overflow: hidden;
    }

    .map-wrapper iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
</head>
<body>

  <h1>Profil Studio Kami</h1>

  <!-- Embed Video -->
  <section>
    <h2>Video Profil</h2>
    <div class="video-wrapper">
      <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Video profil studio desain kami"
        allowfullscreen
      ></iframe>
    </div>
  </section>

  <!-- Embed Musik -->
  <section>
    <h2>Playlist Favorit Tim</h2>
    <iframe
      style="border-radius: 12px;"
      src="https://open.spotify.com/embed/playlist/PLAYLIST_ID"
      width="100%"
      height="380"
      frameborder="0"
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
      loading="lazy"
      title="Playlist musik tim kami"
    ></iframe>
  </section>

  <!-- Embed Peta -->
  <section>
    <h2>Lokasi Studio</h2>
    <div class="map-wrapper">
      <iframe
        src="https://www.google.com/maps/embed?pb=EMBED_URL"
        allowfullscreen
        loading="lazy"
        title="Lokasi studio kami di Semarang"
        referrerpolicy="no-referrer-when-downgrade"
      ></iframe>
    </div>
  </section>

</body>
</html>

Ringkasan Atribut <iframe>

💡 Tips: Saat menyematkan konten dari platform eksternal seperti YouTube, Google Maps, atau Spotify — selalu gunakan kode embed resmi yang disediakan platform tersebut daripada membuat URL embed secara manual. Kode resmi sudah dioptimalkan, lebih stabil, dan mematuhi kebijakan platform. Jangan lupa selalu tambahkan atribut title di setiap iFrame untuk aksesibilitas yang baik. 🎯