Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Mengatur Video Youtube Responsive di Blogger

Cara Mudah Mengatur Video Youtube Responsive di Blogger

Dalam posting kali ini saya akan membahas tentang cara menampilkan video youtube di posting blogspot. Berbeda dengan video youtube biasa yang tampil pada halaman-halaman yang kamu temukan di blog lain, namun ini video youtube tampil dengan lebih responsive. Artinya ukuran lebar sesuai dengan ukuran lebar dari perangkat apa halaman tersebut ditampilkan. Seperti mobile smartphone, tablet, bahkan layar 4K, dll.

Keuntungan memasang video youtube yang responsive di blog adalah agar video yang tampil di posting blog menyesuaikan ukurannya dengan ukuran lebar dari tampilan blog dan tampilannya lebih enak dilihat. Jika tidak menggunakan video responsive kira-kira video yang dipasang di blog bisa melebar melewati batas bagian posting.

Cara Mudah Mengatur Video Youtube Responsive di Blogger

Ada dua cara yang bisa kamu gunakan untuk membuat agar video youtube di Blog kamu tampil secara responsive, yang tentunya akan memperbaiki tampilan video YouTube di blog kamu. Silakan gunakan salah satu dari dua cara berikut ini:

Cara 1: Mengatur video youtube responsive di Blogger

Cara pertama untuk menampilkan video di posting blogger secara responsive adalah sebagai berikut:
  1. Buka Blogger
  2. Pada bagian Tema klik Edit HTML
  3. Temukan kode ]]></b:skin> lalu letakkan kode berikut di atasnya
  4. /* Responsive Youtube [Personal Change] */
    .post-body iframe{width:100%!important;}
    @media screen and (max-width:960px){
    .post-body iframe{max-height:90%}}
    @media screen and (max-width:768px){
    .post-body iframe{max-height:75%}}
    @media screen and (max-width:600px){
    .post-body iframe{max-height:60%}}
    @media screen and (max-width:480px){
    .post-body iframe{height:auto!important;max-height:auto!important}}
  5. Klik tombol Simpan dan lihat hasilnya di blog kamu

Cara pertama ini kelebihannya adalah kamu tidak memerlukan kode Javascript dan hanya menggunakan kode CSS. Namun kekurangannya adalah kode CSS tersebut akan mempengaruhi semua tag iframe di posting blogger kamu. Termasuk iframe untuk iklan adsense dan embed lain seperti, Google Maps, Soundcloud track, Facebook posts, Instagram posts, dll.

Pengaruh untuk iklan adsense

Bagi kamu publisher iklan Adsense, jika ukuran iklan diatur ulang dan tidak sesuai dengan ukuran aslinya, serta terdapat bagian iklan yang terpotong, maka kamu akan mendapat peringatan dari Google Adsense.

Cara 2: Mengatur video youtube responsive di Blogger

Cara kedua ini mempunyai kelebihan yaitu tidak akan mempengaruhi tag iframe manapun di blog kamu termasuk iklan adsense, sehingga cara ini akan aman bagi kamu publisher adsense. Namun kekurangannya cara ini akan lebih merepotkan, kamu perlu mengedit satu per satu video Youtube yang kamu posting di blog kamu. Berikut caranya:
  1. Buka Blogger
  2. Pada bagian Tema klik Edit HTML
  3. Temukan kode ]]></b:skin> lalu letakkan kode berikut di atasnya
  4. /* Youtube Responsive */
    @keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
    .loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
    .videoyoutube{text-align:center;margin:auto;width:100%;}
    .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
    .video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
  5. Tambahkan kode berikut sebelum </body>
  6. <script type='text/javascript'>
    //<![CDATA[
    // Youtube Responsive
    setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
    //]]>
    </script>
  7. Klik tombol Simpan

Untuk posting video Youtube di blog kamu, gunakan kode berikut dan tambahkan pada mode penulisan HTML di posting blogger. Dan ganti bagian yang ditandai dengan kode dari URL video Youtube. Misal alamat vide youtube tersebut adalah https://www.youtube.com/watch?v=56t5F0Evahs, maka kodenya adalah:

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/56t5F0Evahs"></div>
</div>
</div>

Jika kamu pernah membuat posting di blogger yang memuat video Youtube, maka kamu perlu mengedit satu per satu posting tersebut dan mengganti tag iframe dari embed youtube menggunakan kode di atas!

Penutup

Itulah dua cara yang bisa kamu pilih untuk mengatur agar video youtube yang diposting di blogger bisa menjadi responsive atau menyesuaikan setiap ukuran lebar layar. Sebagai rekomendasi, sebaiknya gunakan cara kedua untuk menghindari perubahan yang tidak diinginkan terjadi pada tag iframe lain.

Jangan lupa sampaikan komentar terbaik kamu di bagian bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan sampai jumpa!

Posting Komentar untuk "Cara Mudah Mengatur Video Youtube Responsive di Blogger"