Cara Agar Ikon Link Embed Google Drive Tidak Bisa Diklik

Pada embed Google Drive yang biasa akan terdapat sebuah ikon link atau ikon pop-out di sebelah kanan atas yang apabila diklik akan menuju ke halaman preview Google Drive.
Nah, bagi beberapa pengguna yang menyimpan embed Google Drive di halaman blognya ternyata tidak menginginkan ikon link tersebut karena menyebabkan pentalan pengunjung blognya.

Sebenarnya saya sudah memberikan solusi untuk ini, khususnya untuk file video yaitu dengan menggunakan elemen video HTML5. Namun bagi beberapa orang mungkin trik tersebut agak ribet karena harus terlebih dahulu membuat Google Drive API Key.
Untuk itu, kini saya berikan trik untuk dapat tetap menggunakan kode embed Google Drive yang biasa dengan kode iframe.

Sebenarnya tidak ada cara untuk menghapus atau menyembunyikan ikon link pada embed Google Drive, namun di sini kita akan membuat penghalang sehingga ikon tersebut tidak bisa diklik.
Untuk demonya, silahkan coba untuk klik ikon link pada embed video Google Drive di bawah ini.

Jika Anda ingin mencobanya, silahkan gunakan kode-kode berikut ini.
Tambahkan kode CSS berikut di style blog Anda.

.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;

}

Kemudian untuk menampilkan video Google Drive di postingan blog, gunakan kode HTML berikut.

<div class="drive-responsive">

<iframe width="560" height="315" src="https://drive.google.com/file/d/ID_FILE_GOOGLE_DRIVE/preview" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Silahkan ganti ID_FILE_GOOGLE_DRIVE dengan ID file video Google Drive Anda.
Semoga bermanfaat.

KA