Trik menaruh video youtube responsive ditengah frame gambar monitor Macbook dengan CSS – Terkadang kita perlu untuk menaruh video tepat ditengah layar monitor demi mendapatkan desain yang menarik dan enak dipandang, selain itu desain akan terkesan hidup, walaupun itu sebenarnya adalah sebuah gambar yang diatasnya ditaruh video yang bisa di play.

Memposisikan video tepat di layar monitor itu tidak mudah, perlu trik CSS tersendiri untuk melakukan hal tersebut agar posisinya tepat.

video ditengah layar dengan css

 

Untuk Anda yang ingin mencoba membuat, berikut tutorial singkat yang bisa Anda ikuti

Langkah pertama: membuat file html untuk menuliskan struktur markup yang akan kita gunakan.

Supaya video bisa responsive, kita perlu menaruh meta viewport pada bagian header, seperti berikut ini

<meta name="viewport" content="width=device-width">

Selanjutnya buat kerangka halamannya di dalam body html, seperti kode dibawah ini

<div>



<div>
<iframe width="560" height="315" src="//www.youtube.com/embed/AgFeZr5ptV8" frameborder="0" allowfullscreen></iframe>
</div>



</div>

Script diatas berfungsi untuk membuat struktur halaman, didalamnya ada sebuah .container yang berisi .content, sedangkan kontennya sendiri terdiri atas sebuah iframe yang berisi video youtube.

Langkah kedua: Mengatur layout dan posisi video dengan CSS

div {
	width: 100%;
	height: 100%;
	max-width: 1034px;
	max-height: 543px;
	margin: 0 auto;
}
div div {
	position: relative;
	padding-top: 25px;
	padding-bottom: 67.5%;
	height: 0;
}
div iframe {
	box-sizing: border-box;
	background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
	background-size: contain;
	padding: 11.9% 15.5% 14.8%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Cara kerjanya adalah pertama akan dibuatkan dulu penampungnya berupa div .container, didalamnya terdapat sebuah div .content yang akan berikan konten berupa iframe video youtube.

Div .content dibuat dengan posisi relatif agar bisa ditempatkan tepat didalam .container nya, sedangakan iframe video youtube dibuat posisi absolute agar lebih mudah untuk mengatur posisi, sedangkan ukurannya sendiri dibuat 100% agar memenuhi penampungnya dan agar responsive mengikuti berapapun ukuran layarnya.

DEMO

Anda bisa lihat demonya hasil dan download script nya disini, semoga bermanfaat…