Cara Menciptakan Video Yang Diupload Di Blogger Menjadi Responsive

Cara Menciptakan Video Yang Diupload Di Blogger Menjadi Responsive

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 wacana 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 aba-aba 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 aba-aba nya menyerupai pola dibawah ini.

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

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

Dan langkah selanjut nya silahkan teman copy aba-aba CSS dibawah ini kemudian letakan aba-aba tersebut di atas aba-aba </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 aba-aba 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 aba-aba yang saya tandai tadi di atas.

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

Pastikan teman sudah memasang aba-aba js amp-video di template sobat. Lalu gunakan aba-aba 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 aba-aba yang saya tandai tadi di atas. Dan silahkan teman lihat hasil nya. Untuk pola 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!
Blogger
Disqus
Pilih Sistem Komentar

No comments

Advertiser