Dengan multi server ini, pengunjung atau penonton bisa memilih server yang disukai atau memilih kualitas video yang disediakan. Tombolnya saya buat dengan menampilkannya di dalam iframe ketika iframe di-hover, sehingga tampilan iframe lebih rapih tanpa tombol-tombol.
Responsive iframe dengan multi server ini saya buat dengan menggunakan javascript sehingga akan cukup ringan ketika digunakan di blog.
Agar lebih jelas, silahkan coba pada demo JSFiddle berikut ini, klik tombol demo di bawah ini.
Silahkan tambahkan CSS berikut pada style blog Anda.
.div-frame {
position: relative;
width: 100%;
overflow: hidden;
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
}
.div-frame .frame {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin: 0 auto;
width: 100%
}
.div-frame .frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0
}
.div-frame:hover ul.tab-server,
ul.sub-server,
ul.tab-server {
transition: all .4s ease-in-out
}
ul.tab-server {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: -200px;
z-index: 2;
opacity: .8;
line-height: 1
}
li.server,
ul.sub-server li {
margin: 0;
padding: 7px 10px;
background: #C2185B;
color: #fff;
display: inline-block
}
li.server {
position: relative;
cursor: default;
font-size: 16px;
line-height: 1;
padding-top: 9px;
padding-right: 25px;
width: 100px;
}
ul.sub-server {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
width: 100%;
right: 100%
}
ul li.server,
ul li.server li,
ul.sub-server,
ul.sub-server li {
list-style: none
}
ul li.server:hover ul.sub-server,
ul.sub-server li a {
right: 0;
transition: all .4s ease-in-out
}
ul.sub-server li {
background: #C2185B;
display: block;
padding: 0
}
ul.sub-server li:hover {
background: #AD1457
}
.active a {
background: #880E4F
}
.div-frame:hover ul.tab-server {
left: 0
}
li.server {
background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='30' height='20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 30px 20px;
background-position: right center
}
ul.sub-server li a {
font-size: 14px;
color: #fff;
padding: 7px 10px 5px 30px;
text-decoration: none;
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 32px 13px;
background-position: left center
}</body>
<script>
//<![CDATA[
function go(loc) {
document.getElementById('iframe').src = loc;
};
var btnContainer = document.getElementById("serverid");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
//]]>
</script>
<div class="div-frame">
<div class="frame">
<iframe src="xxxxxxxx" allow="autoplay; encrypted-media" scrolling="no" frameborder="0" allowfullscreen id="iframe"></iframe>
</div>
<ul class="tab-server" id="serverid">
<li class="server">Pilih Server
<ul class="sub-server">
<li class="btn active"><a href="javascript:void" onclick="go('xxxxxxxx')">Blogger 720p</a></li>
<li class="btn"><a href="javascript:void" onclick="go('yyyyyyyy')">Blogger 480p</a></li>
<li class="btn"><a href="javascript:void" onclick="go('zzzzzzzz')">Vidlox 360</a></li>
<li class="btn"><a href="javascript:void" onclick="go('wwwwwwww')">Mystream 240</a></li>
</ul>
</li>
</ul>
</div>xxxxxxxx (ada 2 buah) ganti dengan URL iframe video yg ditampilkan secara default (active iframe).yyyyyyyy, zzzzzzzz, wwwwwwww silahkan ganti dengan URL iframe yang digunakan sebagai pilihan server lainnya.