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
Kemudian buat kerangka halamannya di dalam body, seperti berikut ini
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
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…
susah juga ya…blm begitu ngerti..masih gaptek tapi mau bikin video seperti ini
kalau untuk di pasang di wordpress bagaimana ya min?
cuma berlaku buat mac kah?
dimana saja bisa, kan itu hanya desain
terimakasih artikelnya, semoga bisa di gunakan tutorialnya, sepertinya kalau ada format videonya lebih enak,