Sep
08
2021
September 8th, 2021 by Catur Budi Waluyo

Untuk embed/menyematkan suatu video dari youtube di blog atau website gimna caranya ya?mungkin itu pertanyaan yang sederhana tetapi tidak semua orang menyadari bahwa menautkan video dari youtube sangat mudah. Pada kali ini saya ingin berbagi tentang bagaimana cara embed/menautkan video dari youtube ke web atau ke blog. Video merupakan salah satu konten yang menarik jika diterapkan dalam suatu situs maupun blog, terutama sekarang semua dengan mudah dapat mengakses video dari youtube. Untuk cara embed video Youtube di blog atau website bisa simak berikut ini:

Langkah pertama : Membuat Template HTML untuk embed video

Pada kasus ini saya akan mencoba embed video dari youtube ke website. Sebelum kita embed menempatkan video terlebih dahulu kita siapkan template HTML sebagai demo untuk menampilkan video tersebut kedalam website. Untuk Template bisa temen-temen buat dari bootstrap maupun css, berikut ini contoh template HTML untuk menampilkan video kedalam Website:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Cara Menyematkan Video YouTube</title>
<style>
.container {
width: 560px;
margin: auto;
background: #999999;
}
footer {
padding: 5px 10px;
background-color: #1CBABC;
color: #F4F5ED;
text-align: center;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”content-video”>
<!– Tempatkan Video Disini –>

</div>
<footer>
<h3> Cara Menyematkan Video YouTube </h3>
</footer>
</div>
</body>
</html>

Jika temen-temen sudah punya blog atau website dan mau posting dengan video anda bisa langsung klik source code untuk memasukkan url dari youtube nya

Gambar 1. Tampilan isi konten dalam mode source code

Langkah kedua: Klik menu bagikan

Setelah selesai membuat template tersebut langkah berikutnya yaitu silahkan buka youtube dengan url https://www.youtube.com/ dan pilih video youtube yang nantinya akan kita terapkan pada template yang telah kita buat.

Gambar 2. Tampilan video yang akan dipilih untuk dibagikan

Setelah itu klik share dibagian kanan bawah video, untuk lebih jelas bisa lihat pada gambar berikut ini.

Gambar 3. Tampilan Video yang sudah dipilih danklik tombol bagikan

Langkah ketiga: Pilih media yang akan kita sematkan

Setelah itu, akan muncul pop up yang diharuskan kita memilih, karena kita akan menerapkan pada halaman webiste kita, maka kita pilih Embed

Gambar 4. Pop Up media yang bisa dibagikan

Apa saja media yang bisa kita sematkan? Bisa lihat gambar berikut ini. Dalam kasus ini kita kan menyematkan video kedalam situs maka pada popo up kita pilih sematkan maka akan tampil pada gambar berikut ini.

Gambar 6. Media yang didukung Youtube untuk membagikan video
Gambar 7. Media yang didukung Youtube untuk membagikan video
Gambar 8. Media yang didukung Youtube untuk membagikan video
Gambar 5. Source Code yang dipilih untuk menyematkan Video di situs

Setelah itu copy sintaks yang diberikan seperti pada gambar berikut ini:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Cara Embed Video YouTube di Website</title>
<style>
.container {
width: 560px;
margin: auto;
background: #999999;
}
footer {
padding: 5px 10px;
background-color: #1CBABC;
color: #F4F5ED;
text-align: center;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”content-video”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/U_8_p5CFfSU” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

</div>
<footer>
<h3>Cara Embed Video YouTube di Website</h3>
</footer>
</div>
</body>
</html>

Atau gambar berikut ini:

Gambar 9. Tampilan penempatan source code pada situs

Untuk tampilan tersebut bisa dilihat pada gambar berikut ini:

Gambar 10. Hasil tampilan ketika video youtube sudah disematkan pada situs

Demikian cara menyematkan/embed video pada halaman website,

semoga bermanfaat.

Posted in Artikel Tagged with: , , ,