Responsive Iframe Dengan Multi Server

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 isyarat </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 isyarat 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 dipakai sebagai pilihan server lainnya.

Share this post