Tutorial Web Design

Cara menempatkan video youtube responsive pas di tengah layar monitor dengan CSS – Beberapa hari lalu ada salah seorang teman di fan page facebook menanyakan bagaimana cara untuk membuat mockup macbook namun ada video di layarnya.

Sempat bingung dengan apa yang dimaksud jadi kami diamkan saja, namun lagi-lagi dia menanyakan hal tersebut, namun kali ini dengan penjelasan, bahwa video ditempatkan dilayar monitor dengan css.

Akhirnya kami putuskan untuk membantunya membuat seperti yang dia minta. Yaitu penempatan mockup iMac yang ditengahnya ada video yang bisa di play, dengan bantuan iframe dan sedikit pengaturan css hal tersebut bisa dibuat dengan mudah.

Langkah pertama: Buat file script HTML nya terlebih dahulu.

Taruh script untuk support viewport di header agar website bisa responsive

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

Kemudian buat kerangka halamannya di dalam body, seperti berikut ini

<h1><a href="http://www.tutorial-webdesign.com/">TWD-TV</a></h1>






<div class="container">



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



</div>

Pada script diatas kita membuat kerangka div, lalu didalamnya ada konten, dan didalam konten tersebut ditaruh sebuah iframe yang berisi video youtube.

Langkah kedua: Atur posisi video dengan CSS

h1{
  text-align: center;
}
.container{
    padding: 20px;
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 400px;
    margin: 0 auto;
    /*background: yellow;*/
}
.container .content {
    position: relative;
    padding-top: 20px;
    padding-bottom: 67.5%;
    /*background: red;*/
    /*height: 0;*/
}
.content iframe {
    box-sizing: border-box;
    background: url(https://scontent-sin1-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12986991_1114791205219854_3481131787266598264_n.jpg?oh=a4145a2b368d36a2cc2b04c28a1b353c&oe=57B995DB) center center no-repeat;
    background-size: contain;
    padding: 3.7% 8.5% 20.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Logikanya adalah, pertama tentukan terlebih dahulu luas penampungnya.
Kemudian atur posisi div untuk kontennya, dibuat posisinya relatif dengan luas penampung agar video bisa ditempatkan pada posisi yang tepat, yaitu berada di dalam penampungnya.

Selanjutnya baru diatur posisi iframe video, letakan video pada posisi kiri atas dengan memberikan nilai 0 pada top & left di CSS, lalu buat lebar dan tingginya menjadi 100% agar video memenuhi iframe yang sudah diberi background gambar komputer iMac yang padding nya juga sudah diatur agar sesuai dan tidak melebar.

– Baca juga: Menjadikan Video Youtube Sebagai Background Website

DEMO

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