Cara Agar Ikon Link Embed Google Drive Tidak Bisa Diklik
Cara Agar Ikon Link Embed Google Drive Tidak Bisa Diklik - Pada embed Google Drive yang biasa pasti terdapat sebuah ikon link atau ikon pop-out di sebelah kanan atas yang jikalau 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 admin sudah kasih tahu solusi untuk ini, terutama untuk file video yaitu dengan memakai elemen video HTML5. Namun bagi beberapa orang mungkin cara tersebut agak ribet sebab 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 Shobat mau 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;
}Selanjutnya untuk menampilkan video Google Drive di postingan blog, silahkan 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.
