√ Cara Gampang Mengatur Video Youtube Responsive Di Blogger

Dalam posting kali ini aku akan membahas perihal cara menampilkan video youtube di posting blogspot. Berbeda dengan video youtube biasa yang tampil pada halaman-halaman yang kau 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 yaitu semoga video yang tampil di posting blog menyesuaikan ukurannya dengan ukuran lebar dari tampilan blog dan tampilannya lebih lezat dilihat. Jika tidak memakai video responsive kira-kira video yang dipasang di blog sanggup melebar melewati batas bab posting.

Ada dua cara yang sanggup kau gunakan untuk menciptakan semoga video youtube di Blog kau tampil secara responsive, yang tentunya akan memperbaiki tampilan video Youtube di blog kamu. Berikut ini:

Cara 1: Mengatur video youtube responsive di Blogger

Cara pertama untuk menampilkan video di posting blogger secara responsive yaitu sebagai berikut:

1. Buka Blogger
2. Pada bab Tema klik Edit HTML
3. Temukan isyarat ]]></b:skin> kemudian letakkan isyarat berikut di atasnya

/* 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}}

4. Klik tombol Simpan dan lihat akhirnya di blog kamu

Cara pertama ini kelebihannya yaitu kau tidak memerlukan isyarat Javascript dan hanya memakai isyarat CSS. Namun kekurangannya yaitu isyarat 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 kau publisher iklan Adsense, jikalau ukuran iklan diatur ulang dan tidak sesuai dengan ukuran aslinya, serta terdapat bab iklan yang terpotong, maka kau akan menerima peringatan dari Google Adsense.

Cara 2: Mengatur video youtube responsive di Blogger

Cara kedua ini memiliki kelebihan yaitu tidak akan mempengaruhi tag iframe manapun di blog kau termasuk iklan adsense, sehingga cara ini akan kondusif bagi kau publisher adsense. Namun kekurangannya cara ini akan lebih merepotkan, kau perlu mengedit satu per satu video Youtube yang kau posting di blog kamu. Berikut caranya:

1. Buka Blogger
2. Pada bab Tema klik Edit HTML
3. Temukan isyarat ]]></b:skin> kemudian letakkan isyarat berikut di atasnya

/* 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}

4. Tambahkan isyarat berikut sebelum </body>

<script type='text/j4vascript'> //<![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>

5. Klik tombol Simpan

Untuk posting video Youtube di blog kamu, gunakan isyarat berikut dan tambahkan pada mode penulisan HTML di posting blogger. Dan ganti bab yang ditandai dengan isyarat dari URL video Youtube. Misal alamat vide youtube tersebut yaitu 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 kau pernah menciptakan posting di blogger yang memuat video Youtube, maka kau perlu mengedit satu per satu posting tersebut dan mengganti tag iframe dari embed youtube memakai isyarat di atas!

Penutup

Itulah dua cara yang sanggup kau pilih untuk mengatur semoga video youtube yang diposting di blogger sanggup 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 kau di bab bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/