Cara Embed Video Google Drive Dengan Elemen HTML5

0
310
Cara Embed Video Google Drive Dengan Elemen HTML5
Cara Embed Video Google Drive Dengan Elemen HTML5

Cara Embed Video Google Drive Dengan Elemen HTML5 – Seperti yang kita tau, umumnya untuk mengembed video dari Google Drive ke Website kita, Google Drive sudah menyediakan fitur embed video dengan menggunakan Ifrime. Namun, perlu diketahui juga, fitur Iframe yang disediakan GD biasanya sangat tidak relevan dengan pengunjung blog kita. Alasannya adalah, untuk memutar video tersebut, pengunjung harus mengklik 2x pada tautan video tersebut yang kemudian akan dibawah ke tab baru untuk melihat video yang kita embed tersebut.

Namun, ada satu cara yang bisa kita manfaatkan agar Video yang kita embed pada website kita lebih relevan, yaitu dengan memanfaatkan fitur Elemen Video HTML5 untuk meng-embed video tersebut.

Cara Mudah Embed Video Google Drive Dengan Elemen HTML5 Agar Lebih Relevan

Penasaran bagaimana caranya ? Ya, cara ini sangat mudah kok bagi yang mau memanfaatkannya. Kita hanya perlu membuat API Key Google Drive saja.

Cara Membuat API Key Google Drive

Nah, bagi anda yang belum tau bagaimana cara membuat API Key Google Drive, anda bisa mengikuti beberapa langkah dibawah ini :

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

Jika sudah selesai sampai langkah terakhir dan anda sudah mencatat API Key yang diberi tadi, maka selanjutnya mari kita bahas cara embed video google drive ke postingan website kita.

Sebenarnya, untuk cara embed video google drive ada 2 cara, yaitu untuk pengguna AMP dan pengguna NonAMP.

Cara Embed Video Untuk Blog Non AMP Dengan HTML5

Nah, untuk embed video ke blog yang NonAMP, anda cukup menambahkan CSS dibawah ini kedalam template blog anda.

[css]
.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;
}
[/css]

Selanjutnya, Gunakan kode dibawah ini untuk menampilkan Video dari Google Drive kedalam Postingan Blog anda

[html]

<div class="video-responsive">
<video controls>
<source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/<strong>FileID</strong>?alt=media&key=<strong>GoogleDriveAPIkey</strong>">
</video>
</div>

[/html]

Silahkan anda gantikan Tulisan FileID dengan URL Share Google Drive anda. Berikut adalah contohnya :

[html]
https://drive.google.com/file/d/<strong>0Bz4YdwRI3rnCYkdjamNpTEs5bz</strong>/view?usp=sharing
[/html]

Selanjutnya, pada tulisan GoogleDriveApiKey silahkan anda ganti dengan API Key yang sudah anda buat tadi.

Nah, untuk cara embed video ke blog NonAMP sudah selesai sampai disini. Selanjutnya mari kita lihat cara embed video ke Blog AMP

Cara Embed Video Google Drive Ke Blog AMP dengan Elemen HTML5

Untuk cara embed video ke blog AMP , langkahnya agak sedikit berbeda. Berikut adalah langkah-langkah yang harus anda lakukan.

Pertama, silahkan anda tambahkan Js AMP-Video dibawah didalam HTML blog anda

[html]
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%3D%22%22%20custom-element%3D%22amp-video%22%20src%3D%22https%3A%2F%2Fcdn.ampproject.org%2Fv0%2Famp-video-0.1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
[/html]

Selanjutnya, gunakan kode dibawah ini untuk menampilkan video dipostingan anda.

[html]
<amp-video width="480" height="270" layout="responsive" controls>
<source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/<strong>FileID</strong>?alt=media&key=<strong>GoogleDriveAPIkey</strong>">
</amp-video>
[/html]

Nah, untuk caranya sama seperti diatas, anda hanya perlu mengganti FileID dan Api Key nya dengan punya sobat.

Itulah langkah-langkah untuk Cara Embed Video Google Drive dengan Elemen HTML5 di blogger. Semoga dengan adanya artikel ini dapat membantu kita semua dalam mengatasi suatu masalah yang dialami dalam dunia blogging.

Sumber : KompiAjaib

Please rate this

LEAVE A REPLY

Please enter your comment!
Please enter your name here