Responsive Youtube Video Embed

Banyak dijumpai beberapa website menggunakan standard “embed” video dari youtube, tidak salah, karena memang itulah standard embed video yang diberikan oleh youtube.

Namun alangkah baiknya jikalau embed tersebut responsive terhadap halaman website dimana kita memasangnya.

Video Youtube menggunakan iframe standar,  dalam artiannya adalah ukuran yang diberikan oleh pihak youtube telah ditentukan lebar dan tingginya, tentu ini akan bermasalah jika ditempatkan di halaman yang lebih lebar atau lebih kecil ukaranya.

Kali ini Saya ingin belajar bersama Anda bagaimana agar video embed dari Youtube menjadi responsive (ukuran menyesuaikan tempat yang disediakan).

Berikut dibawah adalah script sederhana Responsive Youtube Video Embed menggunakan CSS.

Responsive CSS Youtube Video

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Youtube Video Embed</title>
	
<!-- CSS for Youtube Video Embed -->

<style>
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
} 
h3 {
	font-family: tahoma;
}
</style>

<!-- End of CSS Youtube Video Embed -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<h3>Youtube Video</h3>

		<div class="video-container">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/k8Q0mACoCeY" frameborder="0" allowfullscreen></iframe>
		</div>

<!-- End of body content -->

</body>
</html>

Script diatas memungkinkan Anda menyematkan Youtube video agar responsive dihalaman website Anda.

Edit dan lihat hasilnya dihalaman Realtime HTML Editor ↗ (script akan otomatis ditampilkan dihalaman tersebut), cobalah untuk menambahkan element atau kode anda lainya agar terlihat lebih baik.

Mudah mudahan bermanfaat, sampai jumpa kembali di artikel berikutnya, dan salam sukses selalu buat Anda semua.

Mungkin Anda Menyukai