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; 

  margin:0; 

  width:100% 

} 

.video-responsive iframe { 

  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"> 

<iframe width="560" height="315" src="xxxxxx" frameborder="0" allowfullscreen=""></iframe>

</div>

Silahkan ganti tulisan xxxxxx dengan link video anda. Contoh linknya seperti berikut:

https://www.blogger.com/video.g?token=

Cara untuk mendapatkan link video yang sudah anda upload yaitu klik kanan pada video kemudian klik inspect elemen.

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-iframe allowfullscreen='' frameborder='0' height='270' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation' allow='autoplay; encrypted-media' src='xxxxxxx' width='480'> 


<amp-img height='270' layout='fixed-height' noloading='' placeholder='' src='https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png'></amp-img> 


</amp-iframe>

Silahkan ganti tulisan xxxxxxx link video tersebut dengan link video anda.

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. Kemudian dapatkan link nya dengan cara yang sudah dijelaskan di atas.

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

Contohnya adalah seperti berikut ini.

<amp-iframe allowfullscreen='' frameborder='0' height='270' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation' allow='autoplay; encrypted-media' src='https://www.blogger.com/video.g?token=AD6v5dzhXEdNTSvzS-LWk3Z1aOIH6EwaOB6mAD5ztqbYPovKC0L3671ROTqvG5Q-ZbHiT4s55F_munvoplZ-JmEj6Pq8D2XsX-9OIxAYhtD3_kjl2li9phSW6ViaClGOrSWKnv9EFTpu
' width='480'> 


<amp-img height='270' layout='fixed-height' noloading='' placeholder='' src='https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png'></amp-img> 


</amp-iframe>

Contoh hasil dari penerapan kode di atas yaitu video di bawah ini:


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.