Cara Membuat Multi Tab Server Iframe Video di Blogger

Multi tab video streaming, merupakan sebuah widget khusus yang di tujukan untuk melakukan embed video dari server lain agar bisa di tampilkan pada blogger. Fitur multi tab ini memungkinkan pengguna untuk menambahkan banyak video dalam 1 tempat, berpindah resolusi, maupun berganti server apabila ada server host yang tidak di sukai, video rusak, maupun loading server embed tersebut lambat.

Multi Tab video kali ini saya bekali dengan script pengubahan HTML dan fitur thumbnail, pengubahan HTML berguna untuk menunda pemuatan iframe agar script video ini tidak berat dan memakan banyak speed load untuk blog atau website kalian. Sebagai gantinya saya berikan fitur thumbnail, Thumbnail berfungsi untuk menampilkan gambar sebelum video dari iframe ditampilkan.

Cara Memasang Multi Tab Video Streaming di Blog

Berikut merupakan tutorial dan langkah - langkan untuk pembuatan widget streaming yang telah kauruka sediakan :

Cara Memasang Kode Multi Tab Video Streaming di Blog

Berikut merupakan tutorial penerapan kode pada template :

• Login ke Blogger.
• Masuk ke dalam Tema.
• Klik Edit HTML.
• Scroll kebawah sampai menemukan kode ]]></b:skin> atau </style>.
• Pastekan kode CSS ini di atas ]]></b:skin> atau </style> pada template kalian.

  #kaurukavideo{margin:auto;overflow:hidden;box-shadow:0 2px 6px -1px rgb(7 10 25 / 5%),0 6px 12px -6px rgb(7 10 25 / 10%);border-radius:8px}.lazy-v{position:relative;width:100%;height:0;padding-bottom:56.25%;background-color:#000;cursor:pointer;overflow:hidden}#kaurukavideo .lazy-v p{color:#fff;display:flex;justify-content:center}.lazy-v iframe,.lazy-v img,.play{position:absolute}.play{top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background-color:rgba(0,0,0,.7);border-radius:50%;display:flex;justify-content:center;align-items:center}.play span{border-style:solid;border-width:15px 0 15px 26.7px;border-color:transparent transparent transparent #fff;margin-left:5px}.lazy-v img{top:0;left:0;width:calc(100% + 5px);border:0;border-radius:0;opacity:.95;z-index:-1}.lazy-v iframe{bottom:0;right:0;width:100%;height:100%}.servideo{display:flex;flex-wrap:wrap;gap:10px;padding:12px;font-size:13px;background-color:#1a1a1a}.servideo .change-video{background-color:#222;color:#eee;border-radius:4px;padding:4px 10px;cursor:pointer;align-items:center;display:flex;transition:.4s}.servideo .change-video.c-aktif,.servideo .change-video:hover{background:rgb(99 77 235);transition:.4s}.servideo .change-video:before{content:"";opacity:0}.servideo .change-video.c-aktif:before{content:"";margin-right:5px;margin-left:-5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eplay-circle%3C/title%3E%3Cpath d='M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23fff' /%3E%3C/svg%3E");width:18px;height:18px;display:inline-block;transition:.3s;opacity:1;}

• Selanjutnya carilah kode </body> dan letakkan kode javascript ini tepat di atasnya.

  <script>/*<![CDATA[*/
  !function() {
  var thum = "URL GAMBAR/COVER/THUMBNAIL";
    
  'use strict';
  document.querySelectorAll(".lazy-v").forEach((function(e){!function(e){var t=e.getAttribute("data-embed"),r=e.querySelector(".play"),l=e.querySelector(".thumb-v");r.addEventListener("click",(function(){if(!t){var r=document.querySelector(".change-video.c-aktif");r&&(t=r.getAttribute("data-embed"))}t&&(e.innerHTML='<iframe src="'+t+'" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>')}));var a=thum;l.src=a,l.onerror=function(){l.remove();var t=document.createElement("p");t.textContent="Thumbnail tidak dapat dimuat.",e.appendChild(t)}}(e)}));var e=document.querySelectorAll(".change-video");e.forEach((function(t){t.addEventListener("click",(function(){e.forEach((function(e){e.classList.remove("c-aktif")})),t.classList.add("c-aktif");var r=t.getAttribute("data-embed"),l=document.querySelector(".lazy-v"),a=document.createElement("iframe");a.src=r,a.frameBorder="0",a.allowfullscreen="true",a.setAttribute("allow","fullscreen"),a.webkitallowfullscreen="true",a.mozallowfullscreen="true",l.innerHTML="",l.appendChild(a)}))}))}();
  /*]]>*/</script>
      

  Ganti "URL GAMBAR/COVER/THUMBNAIL" dengan url gambar yang kalian inginkan.

• Jika kedua kode tersebut sudah selesai di letakkan di tempat yang seharusnya, silahkan Save Template.

Cara Membuat Multi Tab Video Streaming di Blog

Berikut merupakan tutorial pembuatan kode html agar widget streaming multi tab ini bisa tampil di blog kalian :

• Login ke Blogger.
• Buatlah posting baru.
• Setelah masuk ke halaman pembuatan posting, silahkan ubah ke tampilan HTML.
  <> menu ini terletak tepat di bawah kolom pengisian judul posting pada sebelah kiri.
• Jika sudah pada tampilan html, silahkan letakkan html ini di posting yang kalian buat. Kalian bebas menaruhnya dimana saja.

  <div id="kaurukavideo">
    <div class='lazy-v' data-embed='' style='z-index: 1;'>
      <div class='play'>
        <span></span>
      </div>
      <img class='thumb-v' src='' alt='Video Thumbnail'>
    </div>
    <div class="servideo">
      <span class="change-video c-aktif" data-embed="URL EMBED VIDEO">HOST</span>
      <span class="change-video" data-embed="URL EMBED VIDEO">HOST</span>
      <span class="change-video" data-embed="URL EMBED VIDEO">HOST</span>
      <span class="change-video" data-embed="URL EMBED VIDEO">HOST</span>
    </div>
  </div>
        

  Ganti "URL EMBED VIDEO" dengan video embed dalam bentuk url.
  Ganti "HOST" dengan nama hosting kalian mengupload video, bisa juga kalian tulis resolusi dari video tersebut.

• Jika kalian sudah selesai melakukan pengeditan posting. Silahkan klik Publish, maka posting kalian akan menampilkan Multi Tab Server Video.

Pertanyaan yang sering di ajukan