HTML

HTML YouTube Video: Cara Membuat dan Codenya

Cara termudah untuk membuat halaman web memutar video dalam HTML, adalah dengan menggunakan YouTube.

Bermasalah dengan Format Video?

Mengkonversi berbagai macam video ke dalam format yang berbeda terasa sulit dan memakan waktu.

Maka dari itu solusi yang lebih mudah untuk membuat halaman web memutar video adalah dengan membiarkan YouTube memutar video di halaman web Anda.

YouTube Video Id

YouTube akan menampilkan id (seperti tgbNymZ7vqY) pada link sebuah video saat kita akan menyimpan atau memutar video tersebut.

Fungsi dari id ini dapat dapat digunakan utnuk merujuk halaman web pada video dalam kode HTML.

Memutar Video YouTube dalam HTML

Untuk memutar video di sebuah halaman web, lakukan hal-hal dibawah ini:

  • Unggah video ke YouTube
  • Catat id video
  • Tentukan elemen <iframe> di halaman web Anda
  • Biarkan atribut src mengarah ke URL video
  • Gunakan atribut lebar dan tinggi untuk menentukan dimensi player
  • Tambahkan parameter lain pada URL (lihat contoh di bawah)

Contoh :

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

</body>
</html>

YouTube Autoplay + Mute

Kita dapat mengatur apakah video akan mulai diputar secara otomatis saat pengguna mengunjungi halaman tersebut, caranya adalah dengan menambahkan autoplay = 1 ke URL YouTube.

Catatan: Memulai video secara otomatis dapat membuat pengunjung web terganggu dan akhirnya menyebabkan lebih banyak kerugian daripada keuntungan.

Chrome menambahkan aturan kebijakan autoplay yang lebih ketat pada tahun 2018. Pada browser Chromium tidak mengizinkan autoplay pada semua kasus. Namun, autoplay tanpa suara selalu diizinkan.

Tambahkan mute = 1 setelah autoplay = 1 agar video mulai diputar secara otomatis (tetapi dibisukan).

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

</body>
</html>


Catur Kurnia Sari