Ditulis oleh: Ditulis pada: 1/19/2019
Responsive Iframe Dengan Multi Server - Sebelumnya saya sudah mrmbagikan trik membuat multi server file video m3u8 pada Fluid Player yang mungkin bisa digunakan oleh blog-blog streaming TV online dan sejenisnya. Nah, kini saya akan membagikan cara membuat responsive iframe dengan multi server yang bisa digunakan oleh blog-blog yang menyajikan video atau blog-blog movie dan anime.
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.
Jika Anda ingin mencobanya, silahkan ikuti langkah berikut 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
}Kemudian silahkan simpan javascript berikut di atas kode </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>Dan gunakan kode HTML berikut untuk menampilkan iframe videonya di dalam postingan.
<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.