Video adalah konten yang sangat populer di website modern. Baik untuk tutorial, promo produk, hiburan, atau portofolio. Cara termudah untuk menambahkan video ke website adalah dengan menyisipkan video dari platform seperti YouTube menggunakan tag <iframe>.
Apa Itu Tag iframe?
<iframe> (Inline Frame) adalah tag HTML yang digunakan untuk menyematkan (embed) halaman web lain ke dalam halaman kita. Dengan iframe, kita bisa menampilkan video YouTube, peta Google Maps, postingan Instagram, dokumen PDF, dan berbagai konten eksternal lainnya.
Kelebihan menggunakan iframe untuk video YouTube:
- Mudah (cukup copy-paste kode dari YouTube)
- Tidak perlu hosting file video sendiri (hemat bandwidth)
- Otomatis responsif (bisa diatur dengan CSS)
- Mendukung berbagai fitur YouTube (like, subscribe, share)
Cara Mendapatkan Kode Embed YouTube
Langkah 1: Buka video YouTube yang ingin disematkan
Langkah 2: Klik tombol Share (Bagikan) di bawah video
Langkah 3: Pilih menu Embed (Sematkan)
Langkah 4: Copy kode <iframe> yang diberikan
Langkah 5: Paste kode tersebut ke halaman HTML Anda
Contoh Kode Embed YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
VIDEO_ID adalah kode unik dari video YouTube (contoh: dQw4w9WgXcQ).
Struktur Dasar Tag iframe
| Atribut | Fungsi | Contoh |
|---|---|---|
src |
URL konten yang akan ditampilkan (wajib) | src="https://www.youtube.com/embed/..." |
width |
Lebar iframe (dalam pixel atau persen) | width="560" atau width="100%" |
height |
Tinggi iframe (dalam pixel) | height="315" |
allowfullscreen |
Mengizinkan video ditampilkan layar penuh | allowfullscreen |
frameborder |
Ketebalan border (0 = tidak ada border) | frameborder="0" |
allow |
Izin fitur yang diaktifkan | allow="accelerometer; autoplay" |
Contoh Sederhana Menyisipkan Video YouTube
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Embed YouTube</title>
</head>
<body>
<h1>Video Tutorial Belajar HTML</h1>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>
Video Tutorial Belajar HTML
[Placeholder Video YouTube]
Video akan tampil di sini
Contoh iframe video YouTube (tempat kosong sebagai simulasi)
Membuat Iframe Responsif (Aspect Ratio)
Video YouTube biasanya memiliki ukuran tetap (misal 560x315 pixel). Agar video bisa menyesuaikan lebar container (responsif), kita perlu membungkus iframe dengan container dan menggunakan CSS.
Teknik Aspect Ratio (16:9):
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
height: 0;
overflow: hidden;
margin-bottom: 20px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Video Responsif (16:9)
[Video Responsif - Menyesuaikan lebar container]
Dengan teknik ini, video akan selalu mempertahankan rasio 16:9 dan menyesuaikan lebar container.
Parameter URL YouTube yang Berguna
Kita bisa menambahkan parameter ke URL YouTube untuk mengontrol perilaku video.
| Parameter | Fungsi | Contoh |
|---|---|---|
autoplay=1 |
Video berputar otomatis saat halaman dimuat | ?autoplay=1 |
mute=1 |
Video dimulai dalam keadaan mute (wajib untuk autoplay di browser modern) | &mute=1 |
loop=1 |
Video berulang terus menerus | &loop=1 |
controls=0 |
Menyembunyikan kontrol pemutar video | &controls=0 |
rel=0 |
Menyembunyikan video terkait di akhir pemutaran | &rel=0 |
start=60 |
Mulai video pada detik ke-60 (1 menit) | &start=60 |
end=120 |
Berhenti pada detik ke-120 (2 menit) | &end=120 |
Contoh URL dengan Parameter:
<!-- Autoplay (dengan mute), loop, mulai dari detik 30 --> <iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&start=30" ...>
Catatan Penting tentang Autoplay:
- Browser modern (Chrome, Firefox, Safari) memblokir autoplay dengan suara untuk melindungi pengguna
- Untuk autoplay, wajib menambahkan
&mute=1 - Video akan berputar otomatis tanpa suara
- Pengguna bisa meng-unmute manual jika ingin mendengar suara
Contoh Proyek: Halaman dengan Video YouTube
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeri Video - YouTube Embed</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
padding: 40px 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #1e293b;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: #64748b;
margin-bottom: 40px;
}
.video-card {
background: white;
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-info {
padding: 20px;
}
.video-info h2 {
margin-bottom: 10px;
color: #1e293b;
}
.video-info p {
color: #64748b;
line-height: 1.6;
}
.info-box {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
margin-top: 40px;
}
.info-box h3 {
margin-bottom: 15px;
}
.info-box code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
.info-box pre {
background: #1e1e2e;
color: #fff;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin-top: 10px;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<h1>Galeri Video Tutorial</h1>
<p class="subtitle">Kumpulan video tutorial belajar web development</p>
<div class="video-card">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="video-info">
<h2>Belajar HTML Dasar untuk Pemula</h2>
<p>Video tutorial ini akan mengajarkan Anda dasar-dasar HTML dari nol. Cocok untuk pemula yang ingin memulai karir di web development.</p>
</div>
</div>
<div class="video-card">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=30"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="video-info">
<h2>CSS Flexbox Tutorial Lengkap</h2>
<p>Pelajari CSS Flexbox dengan mudah melalui video tutorial ini. Mulai dari dasar hingga implementasi layout modern.</p>
</div>
</div>
<div class="info-box">
<h3>Cara Menyisipkan Video YouTube</h3>
<p>Berikut adalah kode yang digunakan untuk menyisipkan video di halaman ini:</p>
<pre><div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
frameborder="0"
allowfullscreen>
</iframe>
</div></pre>
<p><strong>Parameter yang bisa ditambahkan:</strong></p>
<ul>
<li><code>?autoplay=1&mute=1</code> - Autoplay (tanpa suara)</li>
<li><code>&loop=1</code> - Memutar video berulang</li>
<li><code>&start=30</code> - Mulai dari detik ke-30</li>
<li><code>&rel=0</code> - Menyembunyikan video terkait</li>
</ul>
</div>
</div>
</body>
</html>
Hasil visual halaman galeri video:
Menyisipkan YouTube Shorts
YouTube Shorts (video vertikal) juga bisa disisipkan, tapi perlu perlakuan khusus.
<!-- YouTube Shorts (aspek rasio 9:16) -->
<style>
.shorts-container {
position: relative;
padding-bottom: 177.77%; /* 9:16 aspect ratio (16/9 = 1.7777) */
height: 0;
max-width: 400px;
margin: 0 auto;
}
.shorts-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="shorts-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube Shorts"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Menyisipkan Playlist YouTube
Kita juga bisa menyisipkan seluruh playlist YouTube.
<!-- Playlist YouTube -->
<iframe src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
title="YouTube playlist"
frameborder="0"
allowfullscreen>
</iframe>
Cara mendapatkan PLAYLIST_ID: Buka playlist YouTube, copy kode setelah list= di URL.
Kesalahan Umum Pemula
- Menggunakan URL video biasa (watch?v=...) → Harus menggunakan URL embed (
youtube.com/embed/VIDEO_ID). - Lupa membuat iframe responsif → Video akan memiliki ukuran tetap dan bisa overflow di layar kecil.
- Menggunakan autoplay tanpa mute → Autoplay tidak akan berfungsi di browser modern.
- Lupa menambahkan
allowfullscreen→ Pengguna tidak bisa melihat video layar penuh. - Iframe terlalu kecil → Gunakan container responsif agar video proporsional.
Debugging Tips:
- Buka Developer Tools (F12) → tab Console → lihat apakah ada error terkait iframe
- Pastikan URL iframe menggunakan
https://(bukan http://) - Cek apakah video tidak di-private/unlisted (video harus public atau unlisted dengan embed diizinkan)
Latihan Singkat
- Buka YouTube dan pilih video favorit Anda
- Klik Share -> Embed, copy kode iframe
- Buat file HTML baru dan paste kode tersebut
- Buat video menjadi responsif dengan teknik aspect ratio 16:9
- Tambahkan parameter start=60 agar video mulai dari menit 1
- Simpan dan buka di browser
Intisari Hari Ini
- Tag iframe digunakan untuk menyematkan konten eksternal (video, peta, dll)
- Kode embed YouTube bisa didapatkan dari menu Share -> Embed
- Gunakan format URL:
https://www.youtube.com/embed/VIDEO_ID - Buat iframe responsif dengan teknik aspect ratio (padding-bottom: 56.25% untuk 16:9)
- Tambahkan parameter seperti
autoplay,mute,start,loopke URL - Autoplay wajib disertai
&mute=1agar berfungsi di browser modern - Jangan lupa atribut
allowfullscreenagar video bisa ditampilkan layar penuh
Tantangan: Buat sebuah halaman "Video Gallery" dengan 3 video YouTube yang berbeda! Persyaratan:
Selamat mencoba!
- Setiap video harus responsif (menggunakan teknik aspect ratio)
- Video pertama: autoplay (dengan mute)
- Video kedua: mulai dari detik 60
- Video ketiga: loop (berulang terus)
- Tambahkan deskripsi singkat di bawah setiap video
- Buat layout menggunakan CSS Grid (2 kolom di desktop, 1 kolom di HP)
- Di bagian bawah halaman, tuliskan kode embed yang digunakan beserta penjelasan parameternya
Selamat mencoba!
Artikel Sebelumnya: HTML Dasar #38 - Menggunakan Font Google di HTML
Artikel Selanjutnya: HTML Dasar #40 - Menambahkan Favicon (Icon di Tab Browser)