Cara Embed Video Google Drive Dengan Elemen Video Html5

Seperti kita ketahui bahwa Google Drive memang sudah menyediakan isyarat embed dengan iframe, namun ada sedikit yang mengganjal untuk aku khususya kalau dipakai 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 sanggup lebih gampang untuk kustom player untuk video Google Drive.

Namun untuk sanggup memakai elemen video HTML5 untuk video Google Drive, kita harus memakai Google Drive API key untuk sumber video.

Silahkan buat Google Drive API key dengan langkah-langkah berikut:

1. Silahkan masuk ke Google API Console
2. Kemudian silahkan klik tombol Create Project
3. Setelah project gres berhasil dibuat, silahkan pilih Google Drive API kemudian klik tombol Enable.
4. Kemudian silahkan klik tombol Create Credentials.
5. 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?
6. Selanjutnya klik tombol Create OAuth client ID.
7. Tambahkan Nama untuk Product Name kemudian klik tombol Continue kemudian selanjutnya klik Done.
8. Kemudian silahkan klik tombol biru Create Credentials pada tab Credentials kemudian pilih API key. Silahkan copy isyarat API key yang diberikan dan catat di notepad.

Sampai di sini kita sudah berhasil menciptakan Google Drive API key, selanjutnya ikuti langkah selanjutnya untuk embed video Google Drive di dalam postingan.

Dan berikut ialah cara embed video yang diupload di Google Drive semoga menjadi responsive dengan memakai elemen video HTML5.

1. Untuk blog Non Amp

Silahkan tambahkan CSS berikut ini di style blog Anda. Jika sebelumnya Anda sudah menyimpan CSS ibarat 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 isyarat 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 goresan pena FileID dengan isyarat dari URL share file Google Drive ibarat referensi berikut yang aku tandai dan pastikan file sudah Public on the web.

 https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Kemudian goresan pena 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, kalau 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 isyarat 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 goresan pena FileID dengan isyarat dari URL share file Google Drive ibarat referensi berikut yang aku tandai dan pastikan file sudah Public on the web.

 https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Kemudian goresan pena GoogleDriveAPIkey silahkan ganti dengan Google Drive API key yang tadi dibuat.

Di sini aku tidak menyertakan demonya, namun aku sudah mencoba kode-kode di atas dan berjalan sempurna.

Silahkan dicoba dan semoga bermanfaat.

Share this post