Tutorial Embed Video Responsive

Tutorial Video Responsive

Membuat Video responsive - Di internet saat ini banyak sekali yang membahas segala masalah, mulai dari tutorial , tata cara, tips hingga berita. Pada setiap situ pun ada yang menyediakan konten berupa video. Sumber video tersebut bebas mau dari mana contohnya saja youtube.

Populer : Cara Pasang Load More di Blog

Pada umumnya kita mengembed atau menempelkan dan menampilkan video dari situs tersebut dengan memanfaatkan metode sharing embednya. Namun pada beberapa situs tidak menyediakan embed video yang responsive. Sering kali kita harus mengatus Media query nya juga pada CSS nya. Namun cara yang ini tidaklah praktis karena kita harus mengatur ukuran dari elemen embednya setiap ukuran layar terntu. Kadang juga video yang ditampilkan malah terpotong ataupun tidak sesuai layar walaupun sudah di atus Media querynya.


Namun kali ini ada cara embed video yang benar-benar responsive tanpa harus kita mengatur media querynya. Cara ini memang sudah banyak yang sharing dan memakainya namun jika sobat tidak tahu saya akan memberikan tutorialnya kepada sobat sekarang.

Cara memuat Video yang Responsive

Video responsive ini biasa orang kenal dengan Iframe responsive atau embed responsive karena menggunakan tag iframe. Namun supaya responsive tag iframe tersebut harus dibungkus dengan elemen div yang sebagai pembungkusnya. Jika binggung mari simak css berikut.


.video {
position: relative; /* pada position di buat dengan relative */
padding-bottom: 56.66%; /* padding inilah sebagai responsivenya */ 
height: 0; /* Properti ini di set jadi 0 */
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%; 
height: 100%;
}

Di atas atalah CSS untuk responsive dan telah di tentukan pembungkusnya berkelas 'video' maka cara pakai saat akan dipost di blog sobat


<div class="video">
<iframe src="LINK-VIDEO-DISINI"></iframe>
</div>

Itulah langkah membuat embed video responsive. Embed inipun berlakun untuk video youtube jadi tinggal ikuti langkahnya seperti yang sudah saya berikan di atas. Salam Codepelajar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel