MENAMBAHKAN VIDEO YOUTUBE KE GOOGLE SITES SUPAYA JADI RESPONSIVE

Tutor.Okeguru.Com - Google sites sudah punya fitur untuk menambahkan video YouTube. Ada di menu sisipkan kemudian Scroll ke bawah dan sudah tersedia menu YouTube.

Kali ini saya tidak akan membahas cara itu itu. Tapi akan membahas cara menyisipkan video YouTube supaya bisa ditampilkan menyesuaikan otomatis saat pengguna menggunakan laptop atau menggunakan semut phone. Teknik ini saya disebut embed video responsive

Daftar Isi:

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>

Menyisipkan Script ke Google Site

1. Klik menu Sisipkan / Insert.
2. Klim menu Sematkan / Embed.
   
3. Klik ada tab menu Sematkan Kode.
4. Copy paste kode YouTube yang seperti pada Contoh Script Lengkap
5. Klik Berikutnya.
   
6. Terakhir, klik Sisipkan.
   

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

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