fbpx
K A N G A M E T

Loading

Selamat Datang di Blog ini . 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

Cara Agar Video Youtube 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 - Cara Agar Video Youtube Tampil Responsive Diblogger

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

No Comments

Leave a Comment