Cara Membuat Multi Tab Video Streaming Seperti AnimeStream

 Hiirotaku - Halo temen - temen, pada artikel kali ini mimin bakal bagiin Cara Membuat Multi Tab Video Streaming Seperti AnimeStream.

Langsung saja kita ke langkah - langkahnya seperti biasa..

1. Copypaste-kan kode css di bawah ini di bagian atas tag </style> atau ]]></b:skin>.

.gomuStrem>.gPembed{background:#000;overflow:hidden;position:relative}.gPembed>.resGomu{position:relative;z-index:1;max-width:100%;height:0;padding-bottom:56.2%}.resGomu>iframe{position:absolute;border:none;width:100%!important;height:100%!important;top:0;left:0;margin:0;padding:0;z-index:2}.gomuStrem>.gData{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;background:#fff;position:relative;overflow:hidden;padding:10px 15px;font-size:.85em;margin-bottom:15px}.gData>.gSel>.gomuSelect{border:1px solid #dbdbdb;border-radius:4px;color:#363636;-webkit-box-shadow:inset 0 1px 2px hsl(0deg 0% 4% / 10%);box-shadow:inset 0 1px 2px hsl(0deg 0% 4% / 10%);padding:5px 3px;font-size:13px;font-weight:300;outline:0}.gData>.gDow{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap}.gDow>div:not(:last-child){margin-right:7px}.gDow>div{display:inline-block;padding:5px;font-size:12.5px;line-height:1.2em;cursor:pointer}.gDow>div:before{content:'';display:inline-block;width:14px;height:14px;vertical-align:middle;margin-right:3px}.gCinema:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z' fill='%23a20a0a'/%3E%3C/svg%3E") center/14px no-repeat}.gCinema.gDark:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C9.76,2 7.78,3.05 6.5,4.68L7.93,6.11C8.84,4.84 10.32,4 12,4A5,5 0 0,1 17,9C17,10.68 16.16,12.16 14.89,13.06L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M7.23,10.5L12.73,16H10V13.58C8.68,13 7.66,11.88 7.23,10.5M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z' fill='%23a20a0a'/%3E%3C/svg%3E") center/14px no-repeat}.gDL:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,13H10.55V10H13.45V13H16L12,17L8,13M19.35,10.04C21.95,10.22 24,12.36 24,15A5,5 0 0,1 19,20H6A6,6 0 0,1 0,14C0,10.91 2.34,8.36 5.35,8.04C6.6,5.64 9.11,4 12,4C15.64,4 18.67,6.59 19.35,10.04M19,18A3,3 0 0,0 22,15C22,13.45 20.78,12.14 19.22,12.04L17.69,11.93L17.39,10.43C16.88,7.86 14.62,6 12,6C9.94,6 8.08,7.14 7.13,8.97L6.63,9.92L5.56,10.03C3.53,10.24 2,11.95 2,14A4,4 0 0,0 6,18H19Z' fill='%23a20a0a'/%3E%3C/svg%3E") center/14px no-repeat}.gDow>.gCinema{background:#fff}.gDow>.gDL{border:1px solid #f05252;color:#f05252;border-radius:3px;font-weight:500;padding:3px 10px}#gomuShadow{display:none;position:fixed;left:0;top:0;bottom:0;background:rgba(0,0,0,.93);width:100%;height:100%;z-index:100;transition:all .5s ease}.gomuPly{position:absolute;top:0;width:100%;height:100%;background-image:url(https://i.pinimg.com/originals/29/da/b4/29dab486d78e101620f84c6f344cc553.jpg);background-size:cover}#gomuPly{position:absolute;top:50%;left:50%;width:68px;height:48px;background-color:#333;opacity:.8;box-shadow:0 0 30px rgb(0 0 0 / 60%);z-index:2;border-radius:12px;transform:translate3d(-50%,-50%,0);cursor:pointer;transition:background-color .3s ease-out}#gomuPly:before{content:"";border-style:solid;border-width:10px 0 10px 20px;border-color:transparent transparent transparent #fff;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.gomuPly:hover #gomuPly{background-color:red}

2. Lalu letakkan kode Javascript dibawah ini, tepat di atas kode tag </body>.

<script>/*<![CDATA[*/
function loadMi(e){if(e.value.length<1)return!1;e.value&&document.getElementById("resGomu").getElementsByTagName("iframe")[0].setAttribute("src",e.value),document.querySelector(".gomuSelect>option").setAttribute("disabled","disabled");var t=document.getElementById("gomuPly");if(t){var n=setInterval(function(){t.style.opacity||(t.style.opacity=1),t.style.opacity>0?t.style.opacity-=.1:clearInterval(n)},200);t.parentNode.parentNode.removeChild(t.parentNode)}return!0}document.querySelector(".gomuPly")&&document.getElementById("gomuPly").addEventListener("click",function(){var e=document.getElementById("gomuPly"),t=setInterval(function(){e.style.opacity||(e.style.opacity=1),e.style.opacity>0?e.style.opacity-=.1:clearInterval(t)},200);e.parentNode.parentNode.removeChild(e.parentNode),document.querySelector("#resGomu iframe").setAttribute("src",document.getElementById("gomuDefault").value),document.getElementById("gomuDefault").setAttribute("selected",!0)},!1),document.getElementById("gCinema").addEventListener("click",function(){this.classList.contains("gLight")?(document.querySelector(".gomuStrem>.gPembed").style.zIndex="102",this.classList.remove("gLight"),this.classList.add("gDark"),document.querySelector("#gCinema span").innerHTML="Turn on Light",this.style.zIndex="102",document.getElementById("gomuShadow").style.display="block"):(document.querySelector(".gomuStrem>.gPembed").style.zIndex="",this.classList.remove("gDark"),this.classList.add("gLight"),document.querySelector("#gCinema span").innerHTML="Turn off Light",this.style.zIndex="",document.getElementById("gomuShadow").style.display="none")}),document.getElementById("gCinema").addEventListener("click",function(){this.style.visibility&&(document.querySelector(".gomuStrem>.gPembed, .gDark").style.zIndex="",document.getElementById("gCinema").classList.remove("gDark"),document.getElementById("gCinema").classList.add("gLight"),document.querySelector("#gCinema span").innerHTML="Turn off Light",this.style.display="none")});
/*]]>*/</script>

3. Langkah terakhir buat postingan pada blog , lalu letakkan kode HTML di bawah ini.

<div class='gomuStrem'>
    <div class='gPembed'>
      <div class='resGomu' id='resGomu'>
        <iframe loading="lazy" src="" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" name="search_iframe"></iframe>
        <div class="gomuPly">
          <div id='gomuPly'></div>
        </div>
      </div>
    </div>
    <div class='gData'>
      <div class="gSel">
        <select id='gomuSelect' class="gomuSelect" onchange="loadMi(this)" name="gomuSelect">
          <option value="">Select Video Server</option>
          <option id='gomuDefault' value="#urlStreaming1">Nama Server1</option>
          <option value="#urlStreaming2">Nama Server2</option>
        </select>
      </div>
      <div class="gDow">
        <div class="gCinema gLight" id="gCinema"><span>Turn off Light</div>
        <div class="gDL" id="gDL"><span><a href="#urldownload">Download</a></div>
      </div>
    </div>
  </div>
<div id='gomuShadow'></div>

Tulisan yang di tandai bisa kalian ganti sesuka hati.

DEMO

Update : Cara menghilangkan logo di tengah yang seperti youtube, hapus kode HTML/Post di bawah ini.

<div id='gomuPly'></div>

Fix : Jika menghapus kode di atas terdapat kendala Cinema Mode-nya tidak bisa, kalian bisa sekalian hapus kode ini.

<div class="gomuPly">
          <div id='gomuPly'></div>
        </div>

Mungkin segitu saja untuk artikel kali ini, semoga berhasil menerapkannya, jangan lupa backup terlebih sebelum mencoba..

Source : https://dagruel.com/