√ Cara Embed Video Google Drive Dengan Element Video Html5

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

Sebenarnya google drive sendiri sudah menyediakan embed iframe yang sanggup kau gunakan, Namun menyerupai yang sudah kita ketahui, Namun ada sedikit yang mengganjal untuk saya khususya jikalau 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.

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

Cara Membuat Google Drive API Key

Buka halaman Google API Console

Lalu klik tombol Create Project

Setelah project gres 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 isyarat API key yang diberikan dan catat di notepad.

Selesai.

Sampai tahap ini kita sudah berhasil membuat Google Drive API key, langkah selanjutnya yaitu 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 kau lakukan yaitu menambahkan CSS berikut ini di style blog Anda. namun jikalau kau 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 isyarat 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 menyerupai pola dibawah ini. 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

Jika blog kau sudah AMP gunakan panduan iini.

Silahkan pasang js amp-video berikut di edit HTML blog Anda, dan jikalau kau sebelumnya sudah pernah memasang isyarat 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 isyarat 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 goresan pena FileID dengan isyarat dari URL share file Google Drive menyerupai pola 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 dibentuk tadi.

Selesai.

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

Sumber aciknadzirah.blogspot.com