Ditulis oleh: Ditulis pada: 9/03/2018
Sampai saat ini saya masih belum banyak menemukan Blogger yang memanfaatkan upload video di Blogger. Ya tentu saja mungkin alasannya adalah bahwa video yang diupload di Blogger tidak bisa diuangkan seperti Youtube.Namun menurut saya hal ini bukan alasan yang tepat untuk tidak menggunakan fitur Blogger yang satu ini. Kita masih bisa menghasilkan dari iklan yang dipasang di postingan. Ini bisa berguna untuk video-video tutorial dengan hosting video gratis dari Blogger.
Namun masalah lainnya adalah kode embed video Blogger belum responsive. Tentu saja ini bisa mengganggu tampilan blog di layar yang lebih kecil. Untuk itu kini saya akan membagikan trik agar video yang diupload di Blogger bisa responsive.
Mengupload video di Blogger ini sangat mudah, yang jelas harus disiapkan file videonya misal dengan format MP4. Silahkan klik ikon upload video di bar atas di editor postngan pada mode compose seperti gambar berikut.
Silahkan upload video Anda. Setelah proses upload video selesai, silahkan alihkan editor post ke mode HTML untuk mendapatkan kode videonya. Biasanya kodenya akan tampak seperti berikut ini.
<object id="BLOG_video-c90f4624c2abcde" class="BLOG_video_class" contentid="c90f4624c2abcde" width="320" height="266" ></object>
Kode yang saya tandai adalah kode yang dibutuhkan pada langkah selanjutnya.
Dan berikut adalah cara embed video yang diupload di Blogger agar menjadi responsive.
1. Untuk blog Non Amp
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 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.2. Untuk blog AMP HTML
Silahkan pasang js amp-video berikut di edit HTML blog Anda, jika sudah ada maka tidak perlu pasang lagi.
<script async="" custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Kemudian silahkan gunakan kode berikut untuk menampilkan videonya 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.Di sini saya tidak menyertakan demonya, namun saya sudah mencoba kode-kode di atas dan berjalan sempurna.
Silahkan dicoba dan semoga bermanfaat.