Cara Mudah Membuat Embed Google Drive Aman dan Responsive

Wahyu Development - Bagaimana cara membuat agar link Embed Google Drive tidak dapat di klik serta membuat preview video Google Drive menjadi Responsive dengan JavaScript?

Perlu anda ketahui, sebenarnya Google Drive telah menyediakan Embed Video, akan tetapi menurut saya kurang praktis (Responsive), karena setiap kali ingin memasukan Video ke dalam post maka anda harus merubah ukuran width dan height agar terlihat responsive. Embed video Google Drive juga terbilang cukup banyak mengklik dan link Embed video membuat video tersebut dapat keluar dari halaman website.

Maka dari itu disini saya akan mmbagikan tips agar semua masalah diatas dapat teratasi, berikut ulasannya.

Pertama, silahkan buka Dasbor blog anda --> kemudian klik menu Tema (Theme) --> lalu klik Edit HTML. Pada halaman Edit HTML silahkan anda cari code </head> dan letakan code berikut ini tapat diatasnya.

<script type='text/javascript'>
//<![CDATA[
function embedOffice(t) {
   document.write('<div class="drive-responsive style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen; style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" data-src="https://drive.google.com/file/d/');
   document.write(t);
   document.write('/preview" allowfullscreen></iframe></div></div>');
}
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>

Catatan : kode diatas sudah disertai defer iFrame dan block embed video sehingga jika template anda adalah template movie atau video dan terdapat code seperti dibawah ini, silahkan dihapus.

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

Kedua, tambahkan code CSS berikut sebelum code ]]></b:skin>

.drive-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.drive-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
.drive-responsive::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  opacity: 0;
  z-index: 2;
}

Silahkan Save Tema. Dalam hal ini langkah awal sudah selesai.

Ketiga, berikutnya cara memasang preview video di post, dalam hal ini anda tidak perlu banyak mengatur tata letak video karena sudah di atur dalam JavaScript diatas, berikut ulasannya.

Silahkan anda copy script berikut ini --> lalu ubah "ID UNIK GOOGLE DRIVE"

<script type="text/javascript">embedOffice("ID UNIK GOOGLE DRIVE");</script>

Cara melihat ID GOOGLE DRIVE silahkan anda klik kanan pada Video yang ingin di preview --> kemudian pilih Preview.

Selanjutnya klik opsi lalu pilih Buka jendela baru.

Maka anda akan melihat ID video anda, perhatikan gambar dibawah ini.

Catatan : ID yang disalin yang saya tandai dengan warna kuning

https://drive.google.com/file/d/1UdWpdR4wlMuthwJtldwRjmFR-k6Lg3Un/view

Itulah cara mudah membuat embed video google drive menjadi responsive dan embed link keluar dari halaman tidak dapat di klik. Berikan komentar anda dan semoga bermanfaat . . .

Muhammad Ali Tohiri

Saya adalah orang yang sedikit bicara. Karena saya tahu nggak banyak orang yang mau mendengarkan

Share this post

Related Post