Skip to main content

Cara Embed Iframe Video Blogger Agar Responsive



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

Silahkan ganti xxxxxxx dengan URL embed video Blogger tadi.

Berikut contoh video yang diupload di Blogger dan ditampilkan menggunakan amp-iframe.

Dan berikut ini adalah video cara ambil URL embed video yang diupload di Blogger agar lebih jelas cara ambil URL-nya.

Semoga bermanfaat.


You Might Also Like:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Buka Komentar
PrivacySitemap
©2019 KOMPI AJAIB