Video Responsive Pada Iframe, Object dan Embed

Video Responsive Pada Iframe, Object dan Embed - Video Responsive memungkinkan Video dapat menyesuaikan ukuran ketika ditampilkan pada setiap ukuran layar yang berbeda. Cukup hanya dengan memberikan sentuhan CSS pada elemen pembungkus video, baik Iframe, Object atau Embed, dan video sudah dapat ditampilkan responsive tanpa harus menggunakan media queri css yang berbeda beda ukurannya.



Berikut ini CSS yang digunakan untuk membuat Responsive Video, yaitu dengan membuat class="video" sebagai elemen pembungkus:

CSS

<style>
.video {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>

Kemudian untuk mengimplementasikan pada setiap video, bisa melihat contoh syntax HTML berikut ini:

Contoh 1:

<div class="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/tTLAVcJO8IE" frameborder="0" allowfullscreen></iframe>
</div>

Hasilnya:


Contoh 2:

<div class="video">
<iframe width="79%" height="44%" src="https://www.youtube.com/embed/b8UKtVsAiBI?list=PUkORLF6pTVpod9jvWR5x6PQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Hasilnya:

Contoh 3:

<div class="video">
<object data="https://www.youtube.com/embed/tTLAVcJO8IE?list=PUkORLF6pTVpod9jvWR5x6PQ" width="67%" height="37%" frameborder="0" allowfullscreen></object>
</div>

Hasilnya:

Demikian catatan singkat cara membuat video responsive, cara membuat iframe responsive, iframe video responsive, membuat iframe video responsive, embed video responsive, cara membuat iframe youtube responsive, cara membuat iframe responsive html, cara mengatur ukuran video di html, mengatur posisi video di html, cara menampilkan video di html, cara membuat pemutar video di html, cara menampilkan video youtube di html, cara memutar video youtube di website, cara memasang video youtube responsive di blog, dan semua merupakan Responsive Video, Video Iframe, Object dan Embed. Terimakasih, semoga bermanfaat!