2 LANGKAH CARA EMBED VIDEO YOUTUBE RESPONSIVE

Tutor.Okeguru.Com - Gimana caranya supaya embed video YouTube bisa responsif ?

Selain menyisipkan video YouTube bisa di play pada durasi tertentu, kita juga bisa menyisipkan video YouTube yang responsif.

Responsive video embed adalah teknik atau cara supaya tampilan video bisa menyesuaikan dengan ukuran layar pengguna.

Jadi kalau nanti saat dibuka di smartphone ataupun di laptop ukurannya akan menyesuaikan secara otomatis.

Kita akan bahas gimana caranya supaya video YouTube yang di-embed-kan bisa menyesuaikan ukurannya secara otomatis.

Kode embed video YouTube yang kita saat melakukan sharing, kode script-nya seperti ini:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Lz14SZx400U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Perlu 2 langkah untuk memodifikasi script video YouTube diatas supaya bisa jadi responsif.

Langkah Pertama

Kita buat dulu CSS supaya video YouTube bisa responsif. Script CSS seperti ini.

.videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Langkah Kedua

Selanjutnya kita tambahkan kelas pada script video YouTube. Jadi seperti ini:

<div class="videowrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Lz14SZx400U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div>

Contoh Lengkap Script

Script selengkapnya akan menjadi seperti ini :

<div class="videowrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Lz14SZx400U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> <style> .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

Mudah kan. Jika ada penjelasan yang kurang jelas atau ada kesalahan, silahkan tulis di kolom komentar yaa.

Karena berbagi itu indah, bagikan artikel ini untuk saling berbagi informasi.
Salam inovasi, Salam implementasi.
~☺~