Cara Embed Video Yang Diupload Di Blogger Semoga Responsive

Mengupload video di Blogger ini sangat mudah, yang terang harus disiapkan file videonya misal dengan format MP4. Silahkan klik ikon upload video di kafe atas di editor postngan pada mode compose menyerupai gambar berikut.

Silahkan upload video Anda. Setelah proses upload video selesai, silahkan alihkan editor post ke mode HTML untuk mendapat instruksi videonya. Biasanya kodenya akan tampak menyerupai berikut ini.

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

Kode yang aku tandai yaitu instruksi yang diharapkan pada langkah selanjutnya.

Dan berikut yaitu cara embed video yang diupload di Blogger semoga 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 instruksi 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 goresan pena ID VIDEO SIMPAN DI SINI dengan instruksi yang aku tandai tadi di atas.

2. Untuk blog AMP HTML

Silahkan pasang js amp-video berikut di edit HTML blog Anda, jikalau 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 instruksi 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 goresan pena ID VIDEO SIMPAN DI SINI dengan instruksi yang aku tandai tadi di atas.

Di sini aku tidak menyertakan demonya, namun aku sudah mencoba kode-kode di atas dan berjalan sempurna.

Silahkan dicoba dan semoga bermanfaat.
Sumber https://www.kompiajaib.com/

Share this post