Embed Video Blogger Ke Postingan Blog Menjadi Responsive – Saya pernah mengalami kesulitaan ketika insert video ke dalam artikel blog dan harus valid amp. Memang kalau untuk non amp ya tinggal upload aja videonya.
Akhirnya saya pun menyimpan beberapa file video di google drive dan memasukannya ke dalam artikel blog menggunakan iframe.
Akan tetapi kali ini saya pun menemukan cara untuk memasukan video blogger pada artikel blog dengan menggunakan iframe. Tentu saja script atau kodenya datang dari pemilik template ini yaitu Kompi Ajaib.
Berikut cara embed video blogger ke dalam artikel atau postingan blog menggunakan iframe.
Pertama, silahkan upload videonya di postingan blog melalui insert video, lalu preview atau pratinjau untuk mengambil url yang akan di embed nantinya.
Kedua, Silahkan cari kode iframe yang diawali dengan https://www.blogger.com/video.g?token= kemudian paste seluruh url-nya yang ada pada bagian element tersebut. atau seperti gambar dibawah ini.
Ketiga, silahkan simpan kode url tersebut di notepad atau dimana saja, untuk digunkan nanti pada iframe postingan blog.
Embed Video Blogger Ke Postingan Blog Menjadi Responsive Untuk BLOG NON AMP
1. Simpan kode CSS dibawah ini pada tema 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;
}
2. Gunakan kode dibawah ini, untuk menampilkan video dalam postingan.
<div class="video-responsive">
<iframe width="560" height="315" src="xxxxxx" frameborder="0" allowfullscreen=""></iframe>
</div>
3. Ganti kode xxxxx dengan url embed video tadi diatas.
Embed Video Blogger Ke Postingan Blog Menjadi Responsive Untuk BLOG AMP
1. Gunakan kode dibawah ini untuk menampilkan video dalam postingan blog
<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>
2. Ganti kode xxxxx dengan url video diatas. Berikut contoh hasilnya.
Itulah tutorial cara Embed Video Blogger ke Postingan Blog Agar Menjadi Responsive. Semoga bermanfaat
