Belajar Web Programming PHP, HTML, MySQL dan Tutorial

Cara Memasukan Video Youtube Di Website


Youtube menjadi platform audio visual yang sangat digemari saat ini, jutaan video yang ada disana tentu dapat menjadi sumber referensi yang baik sekali apabila digunakan dengan benar. Namun dengan banyaknya video disana sering kali kita kehilangan informasi mengenai video yang mungkin dulu pernah kita lihat sebagai referensi dan memerlukannya kembali dimasa sekarang. salah satu cara untuk meremainder video yang kita anggap memiliki nilai pengetahuan lebih dapat kita masukan ke sebuah website dalam bentuk katalog video yang tentunya menggunakan fitur embed share yang telah disediakan oleh youtube. Bagaimana caranya? kita dapat melakukannya dengan sederhana namun dapat memberikan effort yang tentu bermanfaat apabila suatu saat diperlukan kembali.

Pertama kali kita menyiapkan sebuah dokumen web boleh dalam bentuk php maupun html. Karena pada tutorial kali ini kita menggunakan data statis maka kita tidak memerlukan database untuk menjalankan aplikasinya. oke mari kita langsung saja.

file: index.php
<!DOCTYPE html>
<html>
<head>
 <title>Cara Memasukan Video Youtube Di Website</title>
 <style>
  body {
   font-family: verdana;
   font-size: 12px;
  }
  .box {
   width: 320px;
   height: 280px;
   border: 1px solid #ccc;
   float: left;
   margin-right: 5px;
   margin-bottom: 5px;
  }
  .box-title {
   height: 40px;
   color: #777;
   text-align: center;
  }
  .box-video {
   width: 320px;
   height: 240px;
  }
 </style>
</head>
<body>
<h1>Cara Memasukan Video Youtube Di Website</h1>
<hr>
<div class="box">
<div class="box-title"> -- judul video disini -- </div>
<div class="box-video">
 -- embed youtube disini --
</div>
</div>

<div style="clear: both;"></div>
<hr>
Copyright &copy;2020 - belajarwebpedia.com
</body>
</html>

Pada kode diatas kita telah menyiapkan space dimana video akan diletakkan, jadi kita akan menuliskan judul beserta video tersebut. Oke berikut adalah list dari video yang akan kita coba tampilkan di website yang ingin dibuat

No Video Title Video Link
1 How to Upgrade laptop RAM and How to Install laptop Memory https://www.youtube.com/watch?v=zhaSzi60fHk
2 How to UPGRADE Your Laptop with a SSD https://www.youtube.com/watch?v=1E_1QFy9Xtc

oke kita menggunakan sampel 2 buah video diatas, untuk mendapatkan kode embed dari youtube kita dapat mengikuti langkah berikut:
1. buka link video youtube, kemudian tekan tombol bagikan/share lalu kemudian pilih embed/sematkan


2. copy kode embed dalam bentuk html iframe untuk kemudian di paste di web kita


oke hasil akhir dari coding cara memasukan video youtube di website adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
 <title>Cara Memasukan Video Youtube Di Website</title>
 <style>
  body {
   font-family: verdana;
   font-size: 12px;
  }
  .box {
   width: 320px;
   height: 280px;
   border: 1px solid #ccc;
   float: left;
   margin-right: 5px;
   margin-bottom: 5px;
  }
  .box-title {
   height: 40px;
   color: #777;
   text-align: center;
  }
  .box-video {
   width: 320px;
   height: 240px;
  }
 </style>
</head>
<body>
<h1>Cara Memasukan Video Youtube Di Website</h1>
<hr>
<div class="box">
<div class="box-title">How to Upgrade laptop RAM and How to Install laptop Memory</div>
<div class="box-video">
<iframe width="320" height="240" src="https://www.youtube.com/embed/zhaSzi60fHk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

<div class="box">
<div class="box-title">How to UPGRADE Your Laptop with a SSD</div>
<div class="box-video">
<iframe width="320" height="240" src="https://www.youtube.com/embed/1E_1QFy9Xtc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

<div style="clear: both;"></div>
<hr>
Copyright &copy;2020 - belajarwebpedia.com
</body>
</html>

Oke coding telah selesai dan video berhasil diembed ke dalam website. Silahkan dicoba ya.
Labels: Tutorial, youtube

Terima kasih telah membaca Cara Memasukan Video Youtube Di Website. Bila bermanfaat boleh di share yah :)

0 Comment for "Cara Memasukan Video Youtube Di Website"

Back To Top