Header Ads

Part 10 - Cara Menambahkan Video YouTube di Website Berbasis HTML

Juni 15, 2024

Di era digital saat ini, menampilkan video dari platform seperti YouTube menjadi salah satu cara efektif untuk memperkaya konten website Anda. Berikut ini adalah langkah-langkah sederhana untuk menambahkan video YouTube ke dalam halaman web berbasis HTML Anda.

1. Mengambil Kode Sematan (Embed Code) dari YouTube

Langkah pertama adalah mendapatkan kode sematan (embed code) dari video YouTube yang ingin Anda tambahkan. Berikut cara untuk melakukannya:
  • Buka video YouTube yang ingin Anda sematkan.
  • Di bawah video, klik tombol "Bagikan".
  • Pilih opsi "Sematkan" (Embed).
  • Anda akan melihat kode HTML yang telah disediakan oleh YouTube. Salin seluruh kode ini.
2. Menggunakan Tag <iframe> di HTML

Setelah Anda memiliki kode sematan dari YouTube, langkah selanjutnya adalah menempelkannya ke dalam kode HTML halaman web Anda. Umumnya, tag <iframe> digunakan untuk menambahkan video YouTube:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video YouTube</title>
</head>
<body>
    <h2>Contoh Video YouTube</h2>
    <!-- Tempelkan kode iframe di sini -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</body>
</html> 
Gantilah VIDEO_ID dengan ID unik dari video YouTube yang ingin Anda sematkan. ID ini biasanya berada setelah youtube.com/watch?v= dalam URL video.

3. Menyesuaikan Ukuran dan Pengaturan Tambahan

Anda dapat menyesuaikan ukuran video dengan mengubah nilai width dan height pada tag <iframe>. Pastikan video terlihat baik pada berbagai perangkat dengan menguji ukuran yang berbeda.
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
  • width: Lebar video dalam piksel.
  • height: Tinggi video dalam piksel.
4. Menyematkan Video di Lokasi Yang Tepat

Letakkan kode <iframe> di dalam elemen HTML yang sesuai dengan desain dan struktur halaman web Anda. Misalnya, dalam <div> atau di antara paragraf teks.

5. Menggunakan Opsi Tambahan
  • allowfullscreen: Memungkinkan video untuk ditampilkan dalam mode layar penuh.
  • frameborder="0": Menghilangkan garis tepi di sekitar video.
Kesimpulan

Menambahkan video YouTube ke dalam halaman web berbasis HTML adalah cara yang mudah untuk meningkatkan konten visual Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan cepat menyematkan video YouTube yang relevan dan meningkatkan pengalaman pengguna di situs web Anda. Pastikan untuk memeriksa tampilan video di berbagai perangkat untuk memastikan responsivitas dan kualitas tampilan yang optimal.

Post a Comment

Tidak ada komentar

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.