Cara Membuat Video Yang Diupload Di Blogger Menjadi Responsive

Jarang sekali para blogger yang menggunakan atau memanfaatkan fitur upload video yang sudah di sediakan oleh blogger itu sendiri, padahal kita bisa menfaatkan nya dengan berbagai video yang kita buat tentang apa pun itu yang berhubungan artikel yang kita buat.

Mungkin alasan kenapa jarang sekali para pengguna blogger tidak memanfaatkan fitur tersebut salah satu nya yaitu video yang kita unggah di blog ternyata tidak responsive atau tidak bisa menyesuaikan dengan tampilan smartphone.

Sebenar nya bisa saja kita membuat video tersebut agar bisa responsive dengan memasang embed kode seperti embed video youtube yang biasa sobat gunakan. Tapi embed video ini agak sedikit berbeda dari embed video youtube yang biasa sobat lihat.

Bila sobat salah satu pengguna fitur video di blogger ini, sobat bisa mencoba nya tips yang akan saya bagikan pada kesempatan kali ini. Silahkan sobat ikuti langkah - langkah nya sebagai berikut.

Cara Membuat Video Yang Diupload Di Blogger Menjadi Responsive

Pastikan sobat sudah mempersiapkan file video yang ingin di upload di blog sobat dengan format mp4.

Dan bila sobat sudah mengupload video nya, biasa nya video tersebut kode nya seperti contoh dibawah ini.

<object id="BLOG_video-c90f4624c2abcde" class="BLOG_video_class" contentid="c90f4624c2abcde" width="320" height="266" ></object>

Kode yang saya tandai merupakan kode yang di butuhkan pada langkah selanjut nya.

Dan langkah selanjut nya silahkan sobat copy kode CSS dibawah ini lalu letakan kode tersebut di atas kode </style> pada template sobat.

.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 silahkan sobat gunakan kode dibawah ini untuk menampilkan video di dalam postingan.

<div class="video-responsive">
<video controls>
 <source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI">
</video>
</div>

Silahkan ganti tulisan ID VIDEO SIMPAN DI SINI dengan kode yang saya tandai tadi di atas.

Dan untuk sobat yang menggunakan blog AMP, sobat bisa lakukan dengan sebagai berikut.

Pastikan sobat sudah memasang kode js amp-video di template sobat. Lalu gunakan kode dibawah ini untuk menampilkan video di dalam postingan.

<amp-video width="480" height="270" layout="responsive" controls>
   <source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI">
  </amp-video>

Silahkan ganti tulisan ID VIDEO SIMPAN DI SINI dengan kode yang saya tandai tadi di atas. Dan silahkan sobat lihat hasil nya. Untuk contoh nya sobat bisa lihat video dibawah ini.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Video Yang Diupload Di Blogger Menjadi Responsive, Cara Membuat Video Blogger Agar Responsive. Selamat mencoba!

Share this post