Menampilkan Video Youtube di HTML


Halo sobat Artikel Multimedia, masih melanjutkan pembahasan dari postingan sebelumnya tentang menampilkan video di html. Pada postingan sebelumnya sumber video diambil dari penyimpanan lokal, kali ini kita akan menampilkan video yang sumbernya dari youtube. Berikut kode html-nya: 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Menampilkan Video dari Youtube</title>
</head>
 
<body>
    <iframe width="600" height="300"
src="https://www.youtube.com/embed/P8QdS--qf_w?controls=1">
    </iframe>
</body>
 
</html>

 

Gambar tampilan video youtube di browser

Sedikit penejelasan sobat tentang tag <iframe> diatas:

  • Tag <iframe>…</iframe>: ini adalah tag yang digunakan untuk menampilkan video dari youtube.
  • Atribut width: atribut ini digunakan untuk menentukan ukuran lebar kotak video.
  • Atribut height: atribut ini digunakan untuk menentukan ukuran tinggi kotak video.
  • Atribut src: atribut ini digunakan untuk memuat alamat atau sumber video.

Untuk penulisan link video, sobat hanya perlu mengambil id video youtube lalu meletakkannya setelah embed/… namun jika tidak, maka kemungkinan besar video gagal dimuat. Id video youtube sendiri bisa sobat temukan di urutan akhir url yang tampil di tab browser, contohnya seperti gambar berikut.

 


Kemudian pada bagian akhir url terdapat tambahan ?controls=1 bertujuan untuk menampilkan pengaturan pada tampilan kotak video, namun jika sobat tidak ingin menampilkan pengaturan tersebut sobat bisa mengganti angka 1 dengan 0 menjadi ?controls=0 atau sobat juga bisa membuat video diputar secara otomatis dengan menambahkan ?autoplay=1&mute=1, yang tadinya seperti ini:

    <iframe width="600" height="300"

src="https://www.youtube.com/embed/P8QdS--qf_w?controls=1">

    </iframe>

 

Menjadi seperti ini:

    <iframe width="600" height="300"

src="https://www.youtube.com/embed/P8QdS--qf_w?autoplay=1&mute=1">

    </iframe>

 

Sekian pembahasan tentang cara menampilkan video youtube di html, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih … 

Posting Komentar

0 Komentar