Embed Video Blogger esponsive

Jika melakukan Video yang diupload pada blogspot sebenarnya tidak perlu dibuat responsive .

karena dengan ukuran 320 x 266 merupakan ukuran video yang bisa dibuka oleh semua device dengan aman.

Namun tetap ukuran ini menjadi kendala pada saat kita menonton menggunakan PC sehingga layar yang kita tonton berukuran kecil dan membuat tidak nyaman.

 

Pada hari ini Portal9 membagikan tutorial sederhana cara "Embed Video Blogger Agar Responsive". Dengan cara ini video yang di embed akan menjadi lebih baik karena bisa tampil full screen dan sudah responsive pada semua ukuran device serta responsive dengan menyesuaikan pada halaman postingan.

Tutorial yang dibagikan ini hampir sama dengan cara embed Video Youtube dengan menggunakan teknik iframe. Video yang diupload pada blogger tidak boleh melebihi 100MB pervideonya. Jika video yang diupload melebihi 100MB, maka video tidak akan terupload (gagal)

Embed Video Blogger Agar Responsive

Silahkan upload video yang kamu miliki pada postingan blog. Setelah video yang kamu upload berhasil, silahkan tekan preview postingan tersebut lalu klik kanan pada preview video dan tekan inspect element. Kemudian cari URL dengan seperti berikut :

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

Lalu copy URL tersebut seperti gambar dibawah :

Klik Pada Gambar Untuk Memperbesar

Setelah kamu meng-copy atau menyimpan URL tersebut, silahkan simpan CSS yang saya sediakan dibawah ini diatas </b:skin> atau pada bagian style blog kamu :

.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 ini untuk menampilkan video pada postinganmu :

<div class="video-responsive">
<iframe width="560" height="315" src="link video" frameborder="0" allowfullscreen=""></iframe>
</div>

Ganti link video yang diberi tanda kuning dengan URL Video blogger yang kamu copy tadi.