Namun tentu saja jadi kurang nyaman menonton videonya ketika ditonton melalui PC atau laptop karena ukuran embed videonya yang kecil.
Maka jika kita buat embed iframe video yang di-upload di Blogger ini menjadi responsive, ini akan menjadi lebih baik karena video bisa tampil full sesuai lebar halaman postingan dan sesuai dengan semua ukuran device.
Sebenarnya sebelum ini saya sudah membagikan cara embed video yang di-upload di Blogger menggunakan elemen video agar responsive, namun sepertinya saat ini trik tersebut sudah tidak bekerja lagi.
Untuk itu kini saya membagikan trik embed video yang di-upload di Blogger menjadi responsive menggunakan elemen iframe atau amp-iframe sehingga ini sama dengan embed video Youtube.
Video yang di-upload di postingan Blogger harus memiliki ukuran maksimal 100MB, jika ukuran videonya lebih besar dari 100MB maka videonya tidak bisa di-upload.
Sekarang silahkan upload video Anda di postingan blog Anda. Setelah video selesai ter-upload, silahkan preview postingan tersebut lalu klik kanan di atas video dan inspect element. Kemudian silahkan cari URL iframe dengan awalan berikut:
https://www.blogger.com/video.g?token=Blog Non AMP
Silahkan simpan CSS berikut di 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;
}
<div class="video-responsive">
<iframe width="560" height="315" src="xxxxxx" frameborder="0" allowfullscreen=""></iframe>
</div>xxxxxx dengan URL video Blogger tadi. Demonya seperti berikut ini:Blog AMP HTML
Seperti halnya video Youtube yang di-embed dengan amp-iframe, video Blogger juga menggunakan kode yang sama 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='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>xxxxxxx dengan URL embed video Blogger tadi.Berikut contoh video yang diupload di Blogger dan ditampilkan menggunakan amp-iframe.
Adhy Suryadi