Membuat Multi Server Video Streaming Dengan Responsive Iframe

Diposting pada

Membuat Multi Server Video Streaming di Blog
Membuat Multi Server Video Streaming Dengan Responsive Iframe – Sebenarnya banyak cara membuat tampilan multi server untuk video streaming yang dapat kamu cari di pencarian google. Tapi menurut saya Membuat Multi Server Video Streaming Dengan Responsive Iframe ini sangat simple dan tampilan nya pun cukup menarik.

Cara kerja multi server dengan menggunakan iframe responsive ini yaitu pengunjung atau penonton mampu menentukan server yang disukai atau menentukan kualitas video yang telah disediakan. Dalam segi Tombolnya ia menampilkannya di dalam iframe saat iframe di-hover, sehingga tampilan iframe pun terlihat lebih rapih tanpa adanya tombol-tombol.

Cara Membuat Multi Server Video Streaming ini kita menggunakan javascript sehingga tidak menyebabkan atau membuat blog menjadi berat. Bagi kamu yang blog nya menyajikan video streaming, movie dan anime. Sangat rekomendasi untuk menggunakan Multi Server Responsive Iframe ini.

Berikut Cara Membuat Multi Server Video Streaming Dengan Responsive Iframe yang telah kami rangkung dari kompiajaib.com.

Cara Membuat Multi Server Video Streaming Dengan Responsive Iframe

Silahkan kamu tambahkan kode CSS ini, lalu letakan kode tersebut di atas kode </style> pada template blog yang kamu gunakan.

.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
}

Lalu copy kode JS dibawah ini dan letakan kode tersebut 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 terakhir gunakan kode HTML berikut setiap kamu membuat postingan untuk menampilkan iframe videonya.

<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>

Keterangan: xxxxxxxx (ada 2 buah) ganti dengan URL iframe video yg ditampilkan secara default (active iframe).
Dan untuk yyyyyyyy, zzzzzzzz, wwwwwwww silahkan kamu ganti dengan URL iframe yang digunakan sebagai pilihan server lainnya.

Itulah Cara Membuat Multi Server Video Streaming Dengan Responsive Iframe yang bisa kamu coba untuk blog streaming, movie, anime dan sebagainya. Bila ada pertanyaan yang menyangkut isi dari artikel di atas, silahkan tinggalkan komentar kamu dibawah atau bisa langsung kunjungi sumber terkait Cara Membuat Responsive Iframe Dengan Multi Server.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *