Selamat Datang

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.

– Baca juga: Menjadikan Video Youtube Sebagai Background Website

DEMO

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

4 thoughts on “Menempatkan Video Youtube Responsive di Layar Monitor iMac Dengan CSS

  1. bunda hanim says:

    susah juga ya…blm begitu ngerti..masih gaptek tapi mau bikin video seperti ini

  2. dida says:

    kalau untuk di pasang di wordpress bagaimana ya min?

  3. Kuya Hejo says:

    cuma berlaku buat mac kah?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development