Responsive Iframe with Multi Server

Responsive Iframe with Multi Server - This time 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 are interested in trying to make a responsive iframe with this multi server, just go ahead, follow these steps:

How to Create an Responsive Iframe with Multi Servers

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
}

Then please save the following javascript above the code </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 the following HTML code is used 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">Select 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>

Information :

• 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 that is used as the other server choice.

Such are the tips that I can share this time about Responsive Iframe with Multi Server. Hopefully with this fairly short tutorial, it can be useful and good luck.

Share :