Skip to main content

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 :

1. Gunakan situs embed online

Ini adalah cara instant tanpa harus menghafalkan script kode , cari video youtube yang anda inginkan kemudian paste url addressnya pada situs embed kode  http://embedresponsively.com kemudian klik embed

 tampil responsive diblogger

Scroll kebawah , anda akan melihat hasil embed kode yang siap di copy paste ke artikel blog anda pada mode HTML

 tampil responsive dibloggerc

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>

Ganti tulisan yang bercetak tebal....

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

Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal.

Diperbolehkan menyalin artikel diblog ini dengan syarat mencantumkan sumber link (teks langsung). Blog anda tidak akan dihapus , deindex , adsense tidak akan menerima keluhan hak cipta dari saya dsb
Buka Komentar
Tutup Komentar