Skip to main content

Labels

PENA INFO

Cara Insert Video di Blogger Agar Responsive AMP dan Non AMP

Insert Video di Blogger

Halo sahabat Pena Info, pada postingan kali ini Pena Info akan memberikan ulasan mengenai bagaimana cara menambahkan video pada postingan di blog namun agar tetap responsive di berbagai perangkat, baik itu dibuka dari desktop maupun mobile.

Dalam mengelola sebuah blog, terkadang pemilik blog ingin menambahkan video ke dalam postingan suatu artikel agar artikel tersebut lebih menarik dan juga lebih mudah dipahami, terlebih lagi blog dengan niche atau topik tutorial.

Tidak jarang pengunjung blog lebih tertarik untuk memperhatikan video nya daripada tulisan-tulisan yang ada di artikel tersebut.

Nah, kendala yang muncul adalah ketika seorang pemilik blog ingin menambahkan video pada blog nya, namun setelah ditambahkan video tersebut menjadi tidak responsive.

Maksudnya adalah jika dibuka melalui pc atau desktop tampilannya dapat full, sedangkan melalui versi mobile tampilannya agak sedikit terpotong.

Hal itulah yang membuat banyak blogger enggan untuk menyematkan video nya ke dalam artikel blog tersebut karena jika layarnya kecil otomatis tampilan video akan terpotong.

Menambahkan Kode pada Template Blog

Insert video atau mengupload video di Blogger sebenarnya sangat mudah untuk diterapkan, tentunya anda harus menyiapkan file videonya dengan format misalnya MP4 atau yang lainnya.

Nah, agar tampilannya menjadi responsive anda perlu menambahkan beberapa kode seperti di bawah ini.

1. Untuk blog Non AMP
Silahkan tambahkan CSS di bawah ini pada template anda, Copy dan Paste pada bagian 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;
}

Selanjutnya gunakan kode di bawah ini untuk menampilkan videonya 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 tulisan ID VIDEO SIMPAN DI SINI dengan id video yang anda upload nanti.

2. Untuk blog AMP 
Silahkan pasang js amp-video berikut ini pada template blog anda, jika sudah ada maka tidak perlu pasang lagi.

<script async='async' custom-element='amp-video' src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Kemudian silahkan gunakan kode 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 tulisan ID VIDEO SIMPAN DI SINI dengan id video yang anda upload nanti.

Langkah-Langkah Insert Video

Silahkan klik ikon upload video di bar atas di editor postngan pada mode compose seperti gambar berikut ini.

Silahkan upload video anda terlebih dahulu. Selanjutnya setelah proses upload video selesai, silahkan alihkan editor Compose ke mode HTML untuk mendapatkan kode id videonya. Biasanya id video akan tampak seperti gabungan huruf dan angka.

Apabila anda sudah mendapatkan id videonya, langkah berikutnya adalah Copy dan Paste kode yang sudah dijelaskan di atas tadi untuk menampilkan di postingan dan masukkan id video yang sudah anda dapatkan.

Karena blog ini menggunakan versi AMP, maka contohnya adalah seperti berikut ini.

<amp-video width="480" height="270" layout="responsive" controls>
<source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=b2edfab74961722b">
</amp-video>

Nah bagaimana sahabat Pena Info? Mudah bukan? Fitur ini sebenarnya sangat berguna apabila dimanfaatkan dengan sebaik-baiknya karena hosting video di Blogger itu gratis.

Selamat mencoba dan semoga bermanfaat.

You Might Also Like:

Comment Policy: Berkomentarlah dengan bijak sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar