Menempatkan Video Youtube Responsive di Layar Monitor iMac Dengan CSS

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.

video youtube responsive 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.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: