Langsung ke konten

Embed Content di HTML: Cara Menyematkan Konten Eksternal dengan `<iframe>`

Pelajari cara embed content di HTML menggunakan tag <iframe>. Pahami cara menyematkan Google Maps, social media embed, dan konten eksternal lainnya.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah membahas video, kita bahas cara menyematkan konten eksternal lainnya. Topik terakhir di seri multimedia.

Apa itu Embed Content?

Embed content adalah menyematkan konten dari website lain ke dalam halaman kita. Caranya menggunakan tag <iframe> (inline frame).

<iframe> membuat sebuah “jendela” yang menampilkan halaman web lain di dalam halaman kita.

Syntax <iframe>

<iframe src="https://example.com" width="600" height="400"></iframe>

Attribute <iframe>

  • src — URL halaman yang akan ditampilkan
  • width — Lebar iframe (pixel atau persen)
  • height — Tinggi iframe (pixel)
  • frameborder — Garis tepi (0 atau 1)
  • allowfullscreen — Mengizinkan fullscreen
  • loading — Lazy loading (lazy atau eager)

Embed Google Maps

Menyematkan lokasi Google Maps:

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

Cara Mendapatkan Kode Embed Google Maps

  1. Buka Google Maps
  2. Cari lokasi yang diinginkan
  3. Klik Share (Bagikan)
  4. Pilih Embed a map (Sematkan peta)
  5. Salin kode <iframe>

Embed YouTube

Menyematkan video YouTube:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/7ItI5aAHGZE&t"
  title="Judul Video YouTube"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Parameter YouTube

YouTube menyediakan beberapa parameter untuk mengontrol pemutar:

ParameterFungsiContoh
autoplayOtomatis putar?autoplay=1
loopPutar berulang?loop=1
startMulai dari detik tertentu?start=30
endBerakhir di detik tertentu?end=60
controlsSembunyikan kontrol?controls=0

Contoh dengan parameter:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/7ItI5aAHGZE&t?start=30&loop=1"
  frameborder="0"
  allowfullscreen
></iframe>

Embed Social Media

Twitter/X Tweet

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/user/status/1234567890">Tweet</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js"></script>

Instagram Post

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/ABC123/">
  <a href="https://www.instagram.com/p/ABC123/">View on Instagram</a>
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

TikTok Video

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@user/video/1234567890" data-video-id="1234567890">
  <a href="https://www.tiktok.com/@user/video/1234567890">View on TikTok</a>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

Embed Spotify

Menyematkan lagu atau playlist Spotify:

<iframe
  src="https://open.spotify.com/embed/track/4cOdK2wElTxcCXnizIhBAB"
  width="300"
  height="380"
  frameborder="0"
  allowtransparency="true"
  allow="encrypted-media"
></iframe>

Embed CodePen

Menyematkan kode dari CodePen:

<iframe
  height="300"
  scrolling="no"
  src="https://codepen.io/username/embed/pen-id"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
></iframe>

Embed Figma

Menyematkan desain dari Figma:

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

Security Considerations

<iframe> punya risiko keamanan. Beberapa attribute untuk mitigasi:

sandbox

Membatasi kemampuan konten di dalam iframe:

<iframe
  src="https://example.com"
  sandbox="allow-same-origin allow-scripts"
></iframe>
NilaiFungsi
allow-same-originIzinkan same-origin
allow-scriptsIzinkan JavaScript
allow-formsIzinkan form
allow-popupsIzinkan popup

Tanpa nilai apapun, semua fitur diblokir.

allow

Mengontrol fitur yang diizinkan secara lebih spesifik:

<iframe
  src="https://example.com"
  allow="camera; microphone; geolocation"
></iframe>

Contoh Halaman dengan Embed

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Embed Content</title>
    <style>
      .embed-section {
        margin-bottom: 30px;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
      }
      iframe {
        max-width: 100%;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>Contoh Embed Content</h1>

    <!-- Google Maps -->
    <div class="embed-section">
      <h2>Lokasi Kantor</h2>
      <iframe
        src="https://www.google.com/maps/embed?pb=..."
        width="600"
        height="450"
        style="border: 0"
        allowfullscreen
        loading="lazy"
      ></iframe>
    </div>

    <!-- YouTube -->
    <div class="embed-section">
      <h2>Video Tutorial</h2>
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/7ItI5aAHGZE&t"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>

    <!-- Spotify -->
    <div class="embed-section">
      <h2>Lagu Favorit</h2>
      <iframe
        src="https://open.spotify.com/embed/track/4cOdK2wElTxcCXnizIhBAB"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"
      ></iframe>
    </div>
  </body>
</html>

Best Practice Embed Content

  1. Gunakan loading="lazy" — Mempercepat loading halaman
  2. Atur ukuran yang sesuai — Jangan terlalu kecil atau terlalu besar
  3. Gunakan sandbox untuk keamanan — Batasi kemampuan konten eksternal
  4. Sediakan fallback — Alternatif jika iframe tidak dimuat
  5. Pertimbangkan privasi — Beberapa embed mengirim cookies
  6. Hindari terlalu banyak embed — Memperlambat loading

Kapan Menggunakan <iframe> vs <embed> vs <object>?

TagPenggunaan
<iframe>Konten web (YouTube, Google Maps, social media)
<embed>Konten eksternal (PDF, plugin)
<object>Konten interaktif (Flash, Java applet)

Saat ini, <iframe> paling sering digunakan. <embed> dan <object> sudah mulai deprecated.

Ringkasan

  • <iframe> untuk menyematkan konten dari website lain
  • Attribute: src, width, height, frameborder, allowfullscreen, loading, sandbox
  • Contoh: Google Maps, YouTube, social media, Spotify, CodePen
  • sandbox untuk keamanan
  • loading="lazy" untuk performa
  • Pertimbangkan privasi dan jumlah embed

Penutup

Kamu sudah memahami cara menampilkan audio, video, dan embed content di HTML. Dengan penguasaan multimedia ini, kamu bisa membuat website yang lebih kaya dan interaktif.

Di modul selanjutnya, kita akan belajar tentang HTML Entities dan Character Encoding, cara menampilkan karakter khusus di HTML.