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.
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:- Buka Blogger
- Pada bagian Tema klik Edit HTML
- Temukan kode
]]></b:skin>
lalu letakkan kode berikut di atasnya - Klik tombol Simpan dan lihat hasilnya di blog kamu
/* 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}}
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:- Buka Blogger
- Pada bagian Tema klik Edit HTML
- Temukan kode
]]></b:skin>
lalu letakkan kode berikut di atasnya - Tambahkan kode berikut sebelum
</body>
- Klik tombol Simpan
/* 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}
<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>
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 tagiframe
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"
Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan <i rel="code">Text here</i> untuk komentar yang berisi kode singkat.
Gunakan <i rel="pre">Text here</i> untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya <b>cetak tebal</b> maupun <i>cetak miring</i>. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.