Lompat ke konten Lompat ke sidebar Lompat ke footer

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 bekerjasama artikel yang kita buat.

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

Sebenar nya dapat saja kita menciptakan video tersebut semoga dapat responsive dengan memasang embed arahan ibarat embed video youtube yang biasa sahabat gunakan. Tapi embed video ini agak sedikit berbeda dari embed video youtube yang biasa sahabat lihat.

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

Cara Membuat Video Yang Diupload Di Blogger Menjadi Responsive

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


Dan jikalau sahabat sudah mengupload video nya, biasa nya video tersebut arahan nya ibarat pola dibawah ini.

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

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

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

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

Pastikan sahabat sudah memasang arahan js amp-video di template sobat. Lalu gunakan arahan 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 arahan yang saya tandai tadi di atas. Dan silahkan sahabat lihat hasil nya. Untuk pola nya sahabat dapat lihat video dibawah ini.



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