Beranda
HTML

Cara Menampilkan Video di HTML

Pada kesempatan ini kodeviolet.com akan membahas tentang Cara Menampilkan Video di HTML, sebuah topik penting untuk kalian yang ingin mempercantik
Kode Violet
Cara Menampilkan Video di HTML

Halo semua, selamat datang kembali di pembahasan seru seputar dunia web development!

Pada kesempatan ini kodeviolet.com akan membahas tentang Cara Menampilkan Video di HTML, sebuah topik penting untuk kalian yang ingin mempercantik halaman web dengan elemen multimedia. Menambahkan video dapat meningkatkan interaktivitas dan membuat konten kalian lebih menarik.

Mengapa Video Penting di Website?

Video bukan hanya media hiburan, tapi juga alat komunikasi yang efektif. Kalian bisa menggunakannya untuk:

  • Menampilkan tutorial
  • Memperkenalkan produk
  • Menjelaskan konsep visual
  • Meningkatkan waktu kunjungan pengguna

Cara Dasar Menampilkan Video di HTML

HTML menyediakan tag khusus untuk menampilkan video, yaitu <video>. Berikut sintaks dasar penggunaannya:

<video width="640" height="360" controls>
  <source src="video-ku.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

Penjelasan Atribut:

Atribut Fungsi
width dan height Menentukan ukuran tampilan video
controls Menambahkan kontrol pemutar (play, pause, dll)
<source> Menyisipkan sumber file video dengan format dan jenisnya
Teks fallback Akan tampil jika browser tidak mendukung tag video

Mendukung Berbagai Format Video

Tidak semua browser mendukung format video yang sama. Sebaiknya sediakan beberapa format:

<video controls>
  <source src="video-ku.mp4" type="video/mp4">
  <source src="video-ku.webm" type="video/webm">
  <source src="video-ku.ogg" type="video/ogg">
  Browser Anda tidak mendukung tag video.
</video>

Menambahkan Fitur Tambahan

Atribut Tambahan Keterangan
autoplay Memutar video secara otomatis saat halaman dimuat
loop Memutar video secara berulang
muted Memulai video dalam kondisi tanpa suara
poster="gambar.jpg" Menampilkan gambar sebelum video diputar

Contoh penggunaan lengkap:

<video width="640" height="360" controls autoplay loop muted poster="thumbnail.jpg">
  <source src="video-ku.mp4" type="video/mp4">
</video>

Menyematkan Video dari YouTube

Jika kalian tidak ingin meng-host video sendiri, kalian bisa menyematkan video dari YouTube:

<iframe width="640" height="360" src="https://www.youtube.com/embed/ID_VIDEO" frameborder="0" allowfullscreen></iframe>

Ganti ID_VIDEO dengan ID dari video YouTube yang ingin ditampilkan.

Contoh Responsif Video YouTube

Agar video tampil maksimal di semua ukuran layar, kalian bisa gunakan pendekatan responsif berikut ini. Misalnya, untuk menyematkan video: https://youtu.be/CIlF0Eq_L-8

<style>
  .video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding-top: 56.25%; /* rasio 16:9 */
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
<div class="video-container">
  <iframe src="https://www.youtube.com/embed/CIlF0Eq_L-8" allowfullscreen></iframe>
</div>
DEMO

Kode di atas membuat tampilan video tetap proporsional di layar desktop maupun perangkat mobile.

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang Cara Menampilkan Video di HTML. Kalian bisa memilih menampilkan video menggunakan tag <video> secara langsung atau menyematkan video dari YouTube untuk menghemat bandwidth. Tambahkan fitur responsif agar pengalaman pengguna lebih baik di berbagai perangkat. Selamat mencoba dan semoga halaman web kalian makin keren!

Posting Komentar