Cara Menciptakan Video Yang Diupload Di Blogger Menjadi Responsive

Jarang sekali para blogger yang memakai atau memanfaatkan fitur upload video yang sudah di sediakan oleh blogger itu sendiri, padahal kita dapat menfaatkan nya dengan banyak sekali video yang kita buat perihal apa pun itu yang berafiliasi artikel yang kita buat.

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

Sebenar nya dapat saja kita menciptakan video tersebut supaya dapat responsive dengan memasang embed instruksi menyerupai embed video youtube yang biasa teman gunakan. Tapi embed video ini agak sedikit berbeda dari embed video youtube yang biasa teman lihat.

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

Cara Membuat Video Yang Diupload Di Blogger Menjadi Responsive

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

Dan kalau teman sudah mengupload video nya, biasa nya video tersebut instruksi nya menyerupai referensi dibawah ini.

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

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

Dan langkah selanjut nya silahkan teman copy instruksi CSS dibawah ini kemudian letakan instruksi tersebut di atas instruksi </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 teman gunakan instruksi 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 goresan pena ID VIDEO SIMPAN DI SINI dengan instruksi yang saya tandai tadi di atas.

Dan untuk teman yang memakai blog AMP, teman dapat lakukan dengan sebagai berikut.

Pastikan teman sudah memasang instruksi js amp-video di template sobat. Lalu gunakan instruksi 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 goresan pena ID VIDEO SIMPAN DI SINI dengan instruksi yang saya tandai tadi di atas. Dan silahkan teman lihat hasil nya. Untuk referensi nya teman dapat lihat video dibawah ini.

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

Share this Article