Membuat Multi Tab Server Video Streaming Seperti Layarkaca21

multi tab server video streaming

Tutorial Cara Membuat Multi tab Video Streaming Click to Load Iframe

Memasang Tab Pilihan Server Untuk Video Streaming di Blog, kali ini saya akan membagikan lagi sebuah widget untuk blog movie yang akan menampilkan beberapa pilihan server dan kualitas video yang berbeda seperti pada wrbsite layar kaca

Buat kalin yang membuat blog moveie tentunya harus membuat beberapa video / Film cadangan di server yang berbeda untuk jaga-jaga apabila di server yang satunya ada masalah / sedang maintenance.
Sebelumnya saya juga sudah pernah share artikel yang sama tapi pada tutorial sebelumnya video yang di pasang akan diload secara bersamaan ketika blog / halaman di buka.

Nah pada widget Responsive Multi Tab Video Streaming ini video / iframe yang ada didalamnya akan di load ketika tombol button di klik. Jadi tidak akan memberatkan loading blog kalian..
Demo Multi Tab Video Streaming

Nah untuk tutorialnya kalian bisa ikuti langkah demi langkah dibawah ini

Membuat Multi Tab Server Video Streaming Responsive di Blog

  • Login ke akun blogger kalian
  • Masuk ke menu TemplateEdit HTML
  • Selanjutnya cari kode </head>
  • Setelah ketemu, masukan CSS dibawah ini tepat diatasnya
  • 
    <style type="text/css">
    /*CSS Multi Tab Video by Blog Mas Tamvan*/
    #multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
    #multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
    #multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
    #multitab-video #server-list{position:relative;background:#fafafa;display:block}
    #multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
    .server-item{border-bottom:1px solid #c8c8cb}
    #multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box}
    a:active{background-color:yellow}
    </style>
    
  • Save Template

Sekarang tinggal memasang kode htmlnya untuk menampilkan videonya didalam postingan. Masuk ke postingan yang ingin dipasany Multi Tab Video Streaminynya

  • Pilih Tab mode HTML jangan COMPOSE
  • Selanjuntya copy dan masukan kode HTML dibawah ini
  • 
    <div id='multitab-video'>
        <div id="movie-player">
            <iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
        </div>
        <div id="server-list">
            <div class="server-item" title="NAMA SERVER">
                <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
                <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
                <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
                <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
            </div>
            <div class="server-item" title="NAMA SERVER">
                <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
                <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
                <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
                <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
            </div>
        </div>
    </div>
    
    • EMBED URL VIDEO : Ganti Dengan Link Film / Video Kalian dan sesuaikan dengan kualitanya, kalo tidak ada hapus aja.
    • NAMA SERVER : Ganti dengan Nama Server upload video yang kalian pakai
  • Selesai, Save dan lihat hasilnya

Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Multi Tab Server Video Streaming Seperti Layar Kaca ini bermanfaat, apabila ada yang tidak dimengerti silahkan bertanya dikolom komentar. Membuat Multi Tab Video Streaming, Multiple Server Video Streaming

30 komentar
  1. Lapor om ko video ga muncul si ? padahal semua yang tulisan EMBEDE URL VIDEO udah di ganti link video youyube tetep ga mucul. trus kalo gadi isi malah tampil blog ane sendiri bukan video

    ReplyDelete
    Replies
    1. Kalo dari youtube pakenya yang embed gan, jangan copy langsung dari urlnya..

      Cek Demo ↓
      https://jsfiddle.net/vd5985po/1/embedded/result

      Delete
  2. Keren banget mas, saya ijin bookmark ya untuk saya gunakan suatu saat nanti

    ReplyDelete
  3. Cara membuat seperti ini gimana mas teja 1https://lh3.googleusercontent.com/-8SL0ZOexfns/WX_03MnaegI/AAAAAAAAAd8/mMlgLz6hmDYzvpqz8OXq8jyxtJQjKL1JgCLcBGAs/h101/Untitled.png

    ReplyDelete
    Replies
    1. Pake CSS background-image gan. Bikin shadownya, upload imagenya terus Taro di div yang di inginkan..

      Delete
  4. cara membuat komentar seperti ini gimana mas1https://lh3.googleusercontent.com/-F9pxdyF9g_A/WX_1VR8tFBI/AAAAAAAAAeA/aj4ar4M496IDK7eX3pXolxo7TnewRrqjgCLcBGAs/h36/dd.png

    ReplyDelete
    Replies
    1. Udah ada artikelnya, coba cari Komentar Blog Show Hide

      Delete
  5. permisi mau tanya, gimana caranya untuk menyesuaikan iframe yg ditampilkan?

    ReplyDelete
    Replies
    1. Menyesuaikan gimana?
      Itu link iframenya tinggal taro aja di button yg udah ada / tambah button baru..

      Delete
  6. mabtab min...
    ue cari cari tutor tentang kek gini gx susah...
    tanks min infonya (y)

    ReplyDelete
  7. Kalau di wordpress pake plugin apa?

    ReplyDelete
  8. saya mau tanya nih gan, ini kan tentang video ya. kalau artikel masukin lagu kaya situs2 download lagu itu gimana ya ? lagunya bisa langsung di putar di blog dan kalau yang pake idm bisa download langsung sewaktu lagunya di putar. terimakasih gan.

    ReplyDelete
  9. Waaahhh keren.. nemu juga ahirnya.. makasih

    ReplyDelete
  10. gan gimana kalau vidionya gak di youtube ?
    gimana kalau vidionya disimpen di google drive atau mediafire ??

    saya udah semet coba sih tapi gak mau kalau selain vidio yang di youtube ? mohon bantuannya gan

    ReplyDelete
    Replies
    1. Iya gan bisa, itu yg di demo saya ambil dari Google Drive.

      Delete
  11. bole juga ni di coba, thanks gan, salam kenal.

    ReplyDelete
  12. Saya ambil di video di google drive ..knp ga nongol yah videonya

    ReplyDelete
    Replies
    1. Apa pemasangannya sudah benar?
      Demo di atas saya gunakan embed dari google drive n normal.

      Delete
    2. Kalau mau ambil embed dari google drive.pencet videonya trus klik titik 3 di kanan atas klik buka di jendela baru trus klik sematkan item.salin kodenya

      Delete
  13. mas yang paling tamvan bisa request untuk tambahan tombol layar redup?

    ReplyDelete
  14. CARAB NGUBAH TINGGI SAMA LEBAR NYA GIMANA

    ReplyDelete
  15. cara ganti biar hasil download sama kaya judul video gimana gan?
    https://drive.google.com/open?id=1b-BKu09DdwzVk0-ZNTditpdcMyykbNLi

    ReplyDelete
  16. tolong di buatkan videonya biar jelas

    ReplyDelete
  17. google drive menolak untuk bersambung (bacaan nya)

    ReplyDelete
  18. Gan, minta solusi..?
    Setelah blogger update,

    Server name klo di clik selalu bukak di halaman baru...?

    Gimana ya...

    Masalah apa sih..

    ReplyDelete
    Replies
    1. Pada tag <a.... jangan dikasih target="_blank"

      contoh
      <a href="......mp4?embed=true&amp;autoplay=true" rel="nofollow" target="_blank">1</a>

      rubah jadi
      <a href="......mp4?embed=true&amp;autoplay=true" rel="nofollow" target="search_iframe">1</a>

      Delete
  19. Kok pas di klik yg 480p/720p palah blank min. Saya pake server Acefile

    ReplyDelete