Secara teknis, tag <iframe> dan tag <video> memiliki fungsi dasar yang berbeda dalam HTML5. Tag <iframe> digunakan untuk menyematkan dokumen atau pemutar video eksternal (seperti YouTube atau Vimeo) ke dalam halaman web, sementara tag <video> digunakan untuk memutar file video lokal yang diunggah langsung ke server Anda sendiri menggunakan pengendali asli browser.
Penggunaan kedua elemen ini harus disesuaikan dengan sumber media dan kebutuhan performa situs web Anda. Di bawah ini adalah perbandingan mendasar antara penggunaan <iframe> untuk video eksternal dan <video> HTML5 untuk berkas lokal.
| Fitur & Aspek | Tag <iframe> (Eksternal) | Tag <video> (HTML5 Lokal) |
|---|---|---|
| Sumber Berkas | Pihak ketiga (YouTube, Vimeo, Dailymotion) | Server sendiri (Format .mp4, .webm, .ogv) |
| Penggunaan Bandwidth | Ditanggung oleh server pihak ketiga | Dibebankan langsung ke server hosting Anda |
| Kustomisasi Pemutar | Terbatas pada parameter API penyedia | Sangat fleksibel (CSS dan JavaScript kustom) |
| Penggunaan Memori | Relatif ringan di sisi server | Membutuhkan optimasi server (CDN/Caching) |
| Kompatibilitas Format | Otomatis ditangani oleh platform penyemat | Tergantung dukungan codec browser klien |
Implementasi Tag <iframe> untuk Video
Jika Anda ingin menyematkan video dari platform seperti YouTube, Anda harus menggunakan tag <iframe> yang diberikan melalui menu bagikan (embed). Berikut adalah contoh kode sintaks dasarnya:
<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; web-share" allowfullscreen></iframe>Langkah-langkah teknis penerapan <iframe> pada halaman web:
- Salin tautan sematan (embed code) langsung dari platform video eksternal yang Anda gunakan.
- Tempelkan kode tersebut ke dalam dokumen HTML pada bagian tubuh (body) di mana video ingin ditampilkan.
- Tambahkan atribut responsif seperti CSS Flexbox atau Grid agar ukuran video dapat menyesuaikan layar seluler (mobile-friendly).
Implementasi Tag <video> HTML5
Untuk memutar file video secara mandiri tanpa bergantung pada situs pihak ketiga, gunakan elemen <video> HTML5 dengan atribut controls agar pengunjung dapat memutar, menjeda, dan mengatur volume.
<video width="640" height="360" controls poster="gambar-sampul.jpg">
<source src="video-lokal.mp4" type="video/mp4">
<source src="video-lokal.webm" type="video/webm">
Browser Anda tidak mendukung tag video HTML5.
</video>Langkah-langkah teknis penerapan tag <video> lokal:
- Siapkan berkas video dalam format MP4 (H.264 video codec dan AAC audio codec) untuk kompatibilitas lintas browser terbaik.
- Unggah berkas video dan gambar sampul (poster) ke direktori server atau CDN Anda.
- Tulis elemen
<video>di dalam HTML dengan menyertakan tag<source>cadangan jika diperlukan.
Tips Optimasi dan Troubleshooting Lapangan
Saat menggunakan <iframe>, video sering kali merusak tata letak responsif situs di perangkat seluler. Untuk mengatasi hal ini, bungkus tag <iframe> di dalam wadah (container) CSS dengan rasio aspek 16:9.
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sementara itu, jika Anda menggunakan tag <video> HTML5 dan video gagal diputar otomatis (autoplay), pastikan Anda menambahkan atribut muted. Sebagian besar peramban modern memblokir pemutaran otomatis video yang memiliki suara demi kenyamanan pengguna.