Embed Video Blogger Agar Responsive

Usuluddin, S.Kom    Senin, Januari 13, 2020    TUTORIAL   

Embed Video Blogger Agar Responsive

GoSEO.id - Video yang diupload pada blogger sebenarnya tidak perlu dibuat responsive karena dengan ukuran 320x266 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 GoSEO.id 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 GoSEO.id bagikan 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.

Semoga tutorial "Embed Video Blogger Agar Responsive" ini berguna. Silahkan tinggalkan komentar jika ada yang tidak dimengerti.

---

Apakah kamu sudah membaca :
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Email Marketing
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Mengapa Teknis SEO & On-Site SEO Cukup Jarang
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense