Cara Embed Video Yang Diupload Di Blogger Biar 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 ibarat 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 ibarat berikut ini.
<object id="BLOG_video-c90f4624c2abcde" class="BLOG_video_class" contentid="c90f4624c2abcde" width="320" height="266" ></object>
Kode yang aku tandai ialah instruksi yang diperlukan pada langkah selanjutnya.
Dan berikut ialah cara embed video yang diupload di Blogger supaya 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.
0 Response to "Cara Embed Video Yang Diupload Di Blogger Biar Responsive"
Post a Comment