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.