Ditulis oleh: Ditulis pada: 10/13/2018
Cara Embed Video Google Drive Dengan Elemen Video HTML5 - Sebelumnya kita sudah mengetahui cara embed video yang diupload di Blogger agar responsive dengan menggunakan elemen video HTML5.Nah kali ini kita juga akan menggunakan trik yang sama yaitu cara embed video dari Google Drive dengan menggunakan elemen video HTML5 dan tentu saja responsive.
Kenapa repot-repot menggunakan elemen video HTML5, kan Google Drive sudah menyediakan kode embed iframe? Mungkin pertanyaan ini ada di sebagian Blogger yang sering menggunakan Google Drive.
Seperti kita ketahui bahwa Google Drive memang sudah menyediakan kode embed dengan iframe, namun ada sedikit yang mengganjal untuk saya khususya jika digunakan untuk embed video. Yaitu kita harus klik 2 kali untuk memutar video dan terdapat ikon link untuk preview video ke Google Drive di kanan atas player yang cukup mengganggu tampilan player.
Dengan elemen video HTML5, maka kita bisa lebih mudah untuk kustom player untuk video Google Drive.
Namun untuk bisa menggunakan elemen video HTML5 untuk video Google Drive, kita harus menggunakan Google Drive API key untuk sumber video.
Silahkan buat Google Drive API key dengan langkah-langkah berikut:
- Silahkan masuk ke Google API Console
- Kemudian silahkan klik tombol Create Project
- Setelah project baru berhasil dibuat, silahkan pilih Google Drive API kemudian klik tombol Enable.
- Kemudian silahkan klik tombol Create Credentials.
- Untuk optian Which API are you using? Silahkan pilih project yang tadi kita buat. Untuk option Where will you be calling the API from? Silahkan pilih Web server (e.g. node.js, Tomcat). Kemudian centang User Data dan klik tombol What credentials do I need?
- Selanjutnya klik tombol Create OAuth client ID.
- Tambahkan Nama untuk Product Name lalu klik tombol Continue lalu selanjutnya klik Done.
- Kemudian silahkan klik tombol biru Create Credentials pada tab Credentials lalu pilih API key. Silahkan copy kode API key yang diberikan dan catat di notepad.
Dan berikut adalah cara embed video yang diupload di Google Drive agar menjadi responsive dengan menggunakan elemen video HTML5.
1. Untuk blog Non Amp
Silahkan tambahkan CSS berikut ini di style blog Anda. Jika sebelumnya Anda sudah menyimpan CSS seperti ini dengan mengikuti postinga cara embed video yang diupload di Blogger, maka silahkan lewati langkah ini.
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-responsive video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
Dan gunakan kode berikut untuk menampilkan video dari Google Drive di dalam postingan.
<div class="video-responsive">
<video controls>
<source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
</video>
</div>
Silahkan ganti tulisan
FileID dengan kode dari URL share file Google Drive seperti contoh berikut yang saya tandai dan pastikan file sudah Public on the web.
https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing
Kemudian tulisan
GoogleDriveAPIkey silahkan ganti dengan Google Drive API key yang tadi dibuat.2. Untuk blog AMP HTML
Silahkan pasang js amp-video berikut di edit HTML blog Anda, jika sudah ada maka tidak perlu pasang lagi.
<script async="" custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Kemudian silahkan gunakan kode berikut untuk menampilkan videonya di dalam postingan.
<amp-video width="480" height="270" layout="responsive" controls>
<source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
</amp-video>
Silahkan ganti tulisan
FileID dengan kode dari URL share file Google Drive seperti contoh berikut yang saya tandai dan pastikan file sudah Public on the web.
https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing
Kemudian tulisan
GoogleDriveAPIkey silahkan ganti dengan Google Drive API key yang tadi dibuat.Di sini saya tidak menyertakan demonya, namun saya sudah mencoba kode-kode di atas dan berjalan sempurna.
Silahkan dicoba dan semoga bermanfaat.