Memasang multi video responsive di blogger

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

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>

Demo

DaltonNet

Memasang multi video responsive di blogger

Related Posts