Embedding Maps dan Video

Dari seluruh konten sematan di web, dua jenis menempati porsi terbesar: peta dan video. Penyedia keduanya — Google Maps, OpenStreetMap, YouTube — menyediakan tombol “Bagikan → Sematkan” yang menghasilkan kode iframe siap tempel. Kode itu sebaiknya tidak ditempel mentah-mentah: kita perlu membacanya dulu, lalu menyesuaikan beberapa bagian sebelum dipasang.

Membaca Kode Embed Penyedia #

Kode embed khasnya berupa satu iframe dengan tiga ciri: src panjang penuh parameter, width/height dari pabrik, dan — sering kali — tanpa title. Tugas kita setelah menempel adalah tiga hal: beri nama bingkai, sesuaikan ukuran dengan tata letak halaman, dan pertimbangkan loading="lazy" bila bingkainya berada di bawah lipatan.

Contoh: Embed Peta OpenStreetMap #

Kode berikut adalah hasil tombol “Embed” OpenStreetMap yang sudah disesuaikan:

<h2>Lokasi Kedai Kopi Siti</h2>

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=106.8%2C-6.21%2C106.83%2C-6.18&amp;layer=mapnik"
  title="Peta lokasi Kedai Kopi Siti"
  width="600"
  height="400"
  loading="lazy"
  sandbox="allow-scripts allow-popups">
</iframe>

Hasil render: kotak 600×400 piksel menampilkan peta area kedai; pengguna menggeser dan memperbesar peta langsung di dalam kotak.

Mari kita telaah penyesuaiannya:

1. Baris 4 (src): alamat penyedia beserta parameternya — bbox menentukan persegi area peta, layer memilih gaya peta. Tanda & adalah cara menulis karakter & di dalam HTML; browser menerimanya sebagai & (dibahas pada chapter Pre). Parameter ini bawaan penyedia; biarkan apa adanya.
2. Baris 5 (title): kode pabrik tidak menyertakannya, jadi kita tambahkan sendiri karena wajib (chapter Iframe Title).
3. Baris 6–7 (width/height): ukuran pabrik boleh diubah sesuai kolom halaman kita — pertahankan rasionya agar peta tidak melar.
4. Baris 8 (loading="lazy"): peta pada halaman kontak biasanya berada jauh di bawah lipatan.
5. Baris 9 (sandbox): interaksi peta hanya membutuhkan script dan popup — pembatasan dari chapter Iframe Sandbox.

Contoh: Embed Video YouTube #

Video milik Siti dibungkus figure agar memiliki takarir gambar:

<figure>
  <iframe
    src="https://www.youtube.com/embed/xYz12345678"
    title="Video: cara menyeduh kopi tubruk"
    width="560"
    height="315"
    loading="lazy"
    allow="fullscreen">
  </iframe>
  <figcaption>Barista Siti menunjukkan langkah menyeduh kopi tubruk.</figcaption>
</figure>

Hasil render: pemutar video tampil dalam rasio 16:9 dengan takarir di bawahnya. Bagian akhir URL — xYz12345678 pada contoh ini adalah ID rekaan — diganti dengan ID video milik kita yang diberikan penyedia.

Mari kita telaah strukturnya:

1. Baris 1 (<figure>): membungkus video bersama takarirnya lewat figcaption — pola yang sama dengan gambar (chapter Figure dan Figcaption).
2. Baris 4 (title): nama bingkai video untuk pembaca layar, ditulis sama seperti pada peta.
3. Baris 8 (allow="fullscreen"): membuka izin mode layar penuh lewat Permissions Policy — atribut allow, bukan token sandbox.

Struktur itu tetap utuh pada demo berikut — hanya nilai src yang diganti https://example.com sebagai pengganti pemutar video, karena tutorial ini tidak menyematkan video penyedia sungguhan. Perhatikan pasangan figure dan figcaption tetap membungkus bingkainya:

Demo memuat halaman daring dan membutuhkan koneksi internet; alamatnya diganti example.com sebagai pengganti pemutar video.

Pada penyematan nyata, nilai src diganti alamat pemutar penyedia — misalnya https://www.youtube.com/embed/ diikuti ID video dari tombol Sematkan milik penyedia — dan seluruh sisanya tetap: title sebagai nama bingkai, ukuran dari pabrik, loading="lazy", serta takarir pada figcaption.

Parameter URL Video #

Perilaku pemutar diatur lewat parameter yang ditulis setelah ID video:

Ringkasan #

• Kode embed peta dan video dibaca dulu, lalu disesuaikan: title, ukuran, loading="lazy", dan sandbox.
• Bungkus video dengan figure/figcaption; buka allow="fullscreen" untuk mode layar penuh.
• Parameter URL mengatur perilaku pemutar — jauhi autoplay bersuara.
• Embed video termasuk sematan terberat; selalu pertimbangkan lazy loading.

Setelah tekniknya dikuasai, satu chapter terakhir merangkum sisi keamanan dari seluruh konten sematan ini.