Cara Embed Video Google Drive Dengan Element Video HTML5

Cara Embed Video Google Drive Dengan Element Video HTML5

Cara Embed Video Google Drive Dengan Element Video HTML5 » Pada kesempatan kali ini saya ingin berbagi panduan embed video google drive menggunakan element video HTML5 yang tentunya responsive dan juga suport AMP.

Sebenarnya google drive sendiri sudah menyediakan embed iframe yang bisa kamu gunakan, Namun seperti yang sudah kita ketahui, 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.

Nah dengan Cara Embed Video Google Drive Dengan Element Video HTML5, maka kita bisa lebih mudah untuk kustom player untuk video Google Drive. dan untuk bisa menggunakan elemen video HTML5 untuk video Google Drive, kita harus menggunakan Google Drive API key untuk sumber video. Nah langkah pertama yang harus kamu lakukan adalah membuat Google Drive API key dengan cara sebagai berikut.

Cara Membuat Google Drive API Key

  1. Buka halaman Google API Console
  2. Lalu klik tombol Create ProjectPada kesempatan kali ini saya ingin berbagi panduan embed video google drive menggunakan element video HTML5 yang tentunya responsive dan juga suport AMP.
  3. Setelah project baru berhasil dibuat, silahkan pilih Google Drive API kemudian klik tombol Enable.Pada kesempatan kali ini saya ingin berbagi panduan embed video google drive menggunakan element video HTML5 yang tentunya responsive dan juga suport AMP.
  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?Pada kesempatan kali ini saya ingin berbagi panduan embed video google drive menggunakan element video HTML5 yang tentunya responsive dan juga suport AMP.
  6. Selanjutnya klik tombol Create OAuth client ID.
  7. Tambahkan Nama untuk Product Name lalu klik tombol Continue lalu selanjutnya klik Done.
  8. 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.
  9. Selesai.

Sampai tahap ini kita sudah berhasil membuat Google Drive API key, langkah selanjutnya adalah meng Embed Video Google drive di dalam postingan dengan menggunakan Element Video HTML5.

Cara Embed Video Google Drive Dengan Element Video HTML5

Panduan Cara Embed Video Google Drive Dengan Element Video HTML5 ada 2 versi, Yaitu versi untuk blog AMP dan untuk blog Non AMP.

1. Untuk Blog Non AMP

Langkah pertama yang harus kamu lakukan adalah menambahkan CSS berikut ini di style blog Anda. namun jika kamu sudah pernah menambahkan CSS tersebut 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 untuk menampilkan Video Google Drive di postingan, silahkan gunakan kode berikut ini.

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

Ganti tulisan FileID dengan  kode dari URL share file Google Drive seperti contoh dibawah ini. 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

Jika blog kamu sudah AMP gunakan panduan iini.

Silahkan pasang js amp-video berikut di edit HTML blog Anda, dan jika kamu sebelumnya sudah pernah memasang kode ini. Silahkan lewati langkah ini dan lanjut kelangkah berikutnya.

<script async="" custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Untuk menampilkan video google drive didalam blog gunakan kode berikut ini.

<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

Ganti text GoogleDriveAPIkey silahkan ganti dengan Google Drive API key yang tadi dibuat tadi.

Selesai.

Nah itulah panduan Cara Embed Video Google Drive Dengan Element Video HTML5, Jika kamu suka dengan konten lapaklama.com seperti ini silahkan share artikel ini kemedia sosial dan jangan lupa berlangganan artikel lapaklama.com via email secara gratis.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *