Responsive Iframes with Multi Servers - Previously I shared the tricks of making a multi server m3u8 video file on Fluid Player which might be used by online TV streaming blogs and the like. Now, I will share how to make responsive iframes with multi servers that can be used by blogs that provide videos or movie and anime blogs.
With this multi server, visitors or viewers can choose the preferred server or choose the quality of the video provided. I made the button by displaying it in an iframe when the iframe was hovered, so that the appearance of the iframe was more neat without the buttons.
I made this responsive iframe with multi server using javascript so that it would be quite light when used on a blog.
If you want to try it, please follow the steps below:
Please add the following CSS to your blog style.
.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>And use the following HTML code to display the video iframe in the post.
<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 (there are 2 pieces) replace with the iframe video URL that is displayed by default (active iframe).
yyyyyyyy , zzzzzzzz , wwwwwwww please replace the iframe URL used as the other server option.