Minggu, 13 November 2016

Memasang multi video responsive di blogger

Dilihat: kali

layout ini cocok sekali digunakan untuk blog anime series, bisa digunakan untuk memasang banyak video dengan satu player, bila satu diputar dan berganti pada alternatif video lain otomatis video yang berjalan akan ganti, jadi walau banyak video tidak bisa diputar bersamaan karena player hanya satu 

Memasang multi video responsive di blogger

Cara menggunakan layout ini pada blogger pasang jquery sebelum kode </head> jika kode ini sudah ada maka lewati saja

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

pasang CSS pada lingkup post only agar video tidak ke-load saat mode home page atau index label, letakkan kode diatas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Player */
#playlist{display:block;margin:0;padding:0;overflow:hidden;background-color:#000;border-bottom:1px solid #969696}
#playlist li{list-style-type:none;color:white;float:left;text-align:center;padding:14px 16px;text-decoration:none;cursor:pointer}
#playlist li:hover{background-color:#b10303;}
#videoarea{width:100%;height:410px;margin:5px 0}
</style>
<!-- kode js taruh disini -->
</b:if>

Pasang javasript player setelah kode </style> sebelum </b:if> pada lingkup CSS diatas

<script>
$(function(){$('#playlist li').on('click',function(){$('#videoarea').attr({'src':$(this).attr('movieurl'),'autoplay':'autoplay'})})
$('#videoarea').attr({'src':$('#playlist li').eq(0).attr('movieurl'),})}).attrundefined"movieurl"),})})
</script>

cara pasang video di postingan gunakan html mode diisi dengan kode berikut

<ul id="playlist">
<li movieurl="https://openload.co/embed/lHvKGHBqgnA/">video 1</li>
<li movieurl="http://watchvideo12.us/embed-ncfikfnqj8l0.html">video 2</li>
<li movieurl="http://mp4upload.com/embed-b3d2j7okf9iu.html">video 3</li>
<li style="float:right">source: animeindo</li>
</ul>
<iframe allowfullscreen="true" frameborder="0" height="400" id="videoarea" margin="0" scrolling="NO" src="" width="640"></iframe>

Silahkan isi kolom komentar dibawah