[UPDATE] Cara Embed Video Google Drive Dengan Elemen Video HTML5

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/10/2021

[UPDATE] Cara Embed Video Google Drive Dengan Elemen Video HTML5 - Beberapa waktu yang lalu saya membagikan Cara Embed Video Google Drive Dengan Elemen Video HTML5. Namun pada saat itu untuk dapat meng-embed video yang dihosting di Google Drive harus menggunakan Google Drive API key agar videonya dapat di-embed dengan elemen video HTML5.

Namun karena untuk membuat Google Drive API key ini cukup rumit bagi pemula, maka kini saya membagikan cara yang lebih mudah untuk meng-embed video Google Drive. Namun hal ini hanya berlaku untuk file di bawah 100mb, jika file lebih besar dari 100mb maka tetap harus menggunakan cara yang pakai Google Drive API key.

Untuk embed-nya sendiri masih menggunakan elemen video HTML5, sementara untuk sumber video ini sekarang bisa menggunakan URL Direct Download Google Drive.

Dengan URL Direct Download Google Drive ini, maka saya yakin pemula pun akan mudah untuk mendapatkan sumber video Google Drive. Cara untuk mendapatkan URL Direct Download Google Drive ini tentunya cukup mudah, yaitu dengan bantuan tool Google Drive Direct Download Link Generator.

Namun jika Anda belum paham cara untuk menggunakan tool Google Drive Generator, silahkan simak video di bawah ini.

Nah, untuk mencoba meng-embed video Google Drive, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan tambahkan CSS berikut ini di style blog Anda.

.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 dengan elemen video HTML5 di dalam postingan.

<div class="video-responsive">

<video controls>

 <source type="video/mp4" src="URL Direct Download Google Drive di sini">

</video>

</div>

DEMO

Dan trik ini juga bisa digunakan untuk AMP HTML dengan menggunakan komponen amp-video.

Semoga bermanfaat.