Cara agar video youtube tampil responsive diblogger

Selamat Datang di Blog Orang IT . Gambar dan video merupakan jenis konten yang menarik bagi pengguna internet , hal ini bisa kita terapkan untuk mengurangi angka bounce rate atau meningkatkan durasi kunjungan blog dengan cara menyisipkan video ditengah artikel . Ada banyak video menarik yang biasanya ditonton lama oleh pengunjung seperti video tutorial , games , trik tips dan video hiburan

Dilansir dari data CNN bahwa 53% pengguna internet di indonesia lebih cenderung menonton video ketika mereka sedang online dan sisanya melakukan aktivitas lain seperti membaca artikel , bermain game , membaca komik dan melakukan pekerjaan

53% adalah angka yang besar , pantas saja banyak fenomena youtuber sukses di indonesia karena jumlah penikmat konten video semakin hari mengalami kenaikan . Bagi pemilik website yang terbiasa menulis panjang harus memahami bahwa kebanyakan netizen malas membaca artikel panjang-lebar oleh karena itu , anda bisa berinisiatif untuk menambahkan konten video didalam artikel blog

Mudah saja untuk menyisipkan video youtube ketengah artikel blog , tinggal di embed kode pada situs resminya kemudian dicopas pada mode HTML

Sayangnya ada sedikit masalah ketika pengguna mengatur ukuran video dengan menambah width atau heightnya , tampilan video menjadi buruk dan terkadang tidak tampil responsive diperangkat smartphone maupun dekstop komputer . 

Pada postingan kali ini saya akan share tips bagaimana menjadikan video youtube yang coba anda sisipkan kedalam artikel blog tampil responsive :

Kelebihan menggunakan cara embed online adalah anda tidak perlu mengotak atik template dengan menambahkan kode javascript atau css , anda hanya perlu mempaste hasil script yang sudah diedit menjadi responsive . Selain situs youtube anda juga bisa menggunakan situs penyedia video lain seperti liveleak , dailymotion , vimeo dll

2. Menggunakan CSS

Selanjutnya cara anti repot , yakni menambahkan css pada template blog agar tampilan video menjadi rapih caranya mudah buka menu editor template dan cari kode  ]]></b:skin> atau </style> , gunakan shorcut ctrl + F

Langsung saja paste script berikut diatasnya :

/* CSS Video Responsive */
.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}}

Terakhir tambahkan kode Jquery  dibawah ini, dan letakan diatas </body>

<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 menampilkan video responsive di artikel blog/web, gunakan kode dibawah ini pada menu editor artikel lalu pilih HTML.

<div class=”videoyoutube”>
<div class=”video-responsive”>
<div class=”video-youtube loader” data-src=”Letakan Link Embed Video Disini”>
</div>
</div>
</div>

Untuk video youtube langsung pakai saja embed script ini, pastekan pada halaman entry – tab HTML

<div class=”youtube_box”>
<div class=”youtube” onclick=”videoPlay(this)”>
<div class=”youtube-resposive”>
 <img src=”data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=” data-src=”https://i.ytimg.com/vi/O-HlH1qK8-Q/sddefault.jpg” alt=”youtube image” width=”500″ height=”281″/>
   <!–<iframe src=”https://www.youtube.com/embed/O-HlH1qK8-Q?autoplay=1&autohide=1″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” frameborder=”0″ allowfullscreen=”1″></iframe>–>
</div>
</div>
</div>

Selesai dan simpan , lihat pratinjau nya semoga template anda tidak error

Demikian postingan mengenai cara membuat agar tampilan video diyoutube menjadi responsive , semoga bermanfaat dan bisa diterapkan keblog . Jika anda punya tips lain jangan sungkan menambahkan melalui kolom komentar dibawah agar artikel ini lebih lengkap