Menampilkan Video Youtube dengan Iframe

Video merupakan salah satu elemen yang sering kita temui pada website. Kegunaan video pada website ini bisa menjadi salah satu alternatif sebagai media penyampaian informasi dengan visual sehingga akan lebih mudah dicerna oleh pengunjung. Dengan adanya video akan membantuk minat pengunjung untuk betah berlama-lama di website kita. Karena ukuran video biasanya besar, maka kita bisa mengakalinya dengan meng-upload videonya ke youtube.

Sesuai dengan pembahasan kali ini kita akan belajar bagaimana cara menampilkan video youtube dengan iframe. Jadi iframe ini adalah salah satu tag pada html yang dapat menampilkan salah satu contohnya adalah video dari sumber lain, misalnya seperti youtube. Karena ukuran file video besar, jadi akan memberatkan load website kita sehingga kita bisa menggunakan alternatif lain yaitu cukup menarik link video dari youtube lalu tampilkan pada website kita.

Caranya bagaimana ? kalian bisa ikuti langkah-langkah berikut ini. Pertama kalian bisa coba buat tampilan website sederhananya dulu seperti contoh dibawah ini.

video.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Video Youtube</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="">
			<h1>Ini adalah video ku dari youtube</h1>
			<iframe width="560" height="315" src="https://www.youtube.com/embed/KODELINK" frameborder="0" allowfullscreen></iframe>
			<p>Terimakasih telah melihat videoku, jangan lupa untuk subscribe,like dan share video ini kepada teman-teman kalian. Semoga bermanfaat</p>
		</div>
	</div>
</body>
</html>

Simpan file tersebut dengan format html. Jika sudah sekarang lanjut untuk file cssnya, kalian bisa salin code dibawah ini.

style.css

body{
	background: #ccc;
}
.container{
	width: 800px;
	margin: auto;
	background: white;
	padding: 20px;
}

Simpan file css tersebut dan jangan lupa untuk menyimpan file css satu folder dengan file html yang telah kita buat sebelumnya.

Dan sekarang lanjut untuk mencari video dari youtube. Kalian bebas memilih videonya, seperti pada contoh yang akan saya praktikan adalah video dumet school.

Setelah sudah menentukan videonya, kalian salin linknya yang berada pada tanda kuning pada gambar, lalu paste pada script iframe dibawah ini.

<iframe width="560" height="315" src="https://www.youtube.com/embed/KODELINK" frameborder="0" allowfullscreen></iframe>

menjadi seperti ini.

<iframe width="560" height="315" src="https://www.youtube.com/embed/lGWoGdRKph8" frameborder="0" allowfullscreen></iframe>

Sekarang kalian simpan dan lihat hasilnya akan seperti ini.

mudah bukan ?

Sekian pembahasan mengenai bagaimana cara menampilkan video youtube dengan iframe. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *