Cara Embed Iframe Video Blogger Agar Responsive - Sebenarnya video yang di-upload di Blogger ini memang tidak perlu dibuat responsive karena ditampilkan dengan ukuran 320x266 sehingga bisa aman di semua ukuran device.
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=Kemudian silahkan copy URL tersebut seperti pada gambar berikut ini.
Setelah itu silahkan simpan URL tersebut di notepad, kemudian lakukan seperti berikut ini.
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;
}Kemudian silahkan gunakan kode berikut untuk menampilkan video di dalam postingan.
<div class="video-responsive">
<iframe width="560" height="315" src="xxxxxx" frameborder="0" allowfullscreen=""></iframe>
</div>Silahkan ganti kode xxxxxx dengan URL video Blogger tadi.
Sumber Artikel ini dari kompiajaib
