Membuat Multi Tab Video Streaming Responsive di Blog

Membuat Multi Tab Video Streaming Responsive Di Blog

Cara memasang multi tab video streaming responsive di blog

Pada postingan kali ini saya akan berbagi tentang multi tab video streaming. Jadi kalian bisa memasukan 3 (tiga video)bisa untuk pilihan chanel atau bisa untuk menambah vido lanjutannya.

bisa juga kalian menaruh beberapa video dengan kualitas yang berbeda, bisa juga menaruh video dengan server yang berbeda, buat cadangan apa bila uploadan video / film di server yang satu tidak bisa di play.

Demo Tampilan Multi Tab Video Streaming Responsive Di Blog

Nah bagi kalian yang igin memasang multi tab video streaming youtube responsive di blog, silahkan ikuti langkah demi langkah berikut ini.

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML.
  • Cari Code </head>
  • Lalu masukan css dibawah ini tepat di atas kode tadi.
  • 
    <style type='text/css'>
    .tab-buttons{
      overflow:auto;
      text-align: center;
    }
    .tab-buttons button{
      background:#363f45;
      color:#feb41c;
      border:none;
      padding:10px 20px;
      font:700 15px 'segoe ui',sans-serif;
      text-transform:uppercase;
      cursor:pointer;
      -webkit-transition:all 300ms ease-in;
      -moz-transition:all 300ms ease-in;
      transition:all 300ms ease-in;
    }
    .tab-buttons button.active{
        color: #fff;
        background: #5e7c88;
    }
    .tab-content>div{
      padding:20px;
      background:#5e7c88;
      font:400 16px 'segoe ui',sans-serif;
      color:#fff;
    }
    
    .tab-content iframe{width:100%!important;height:400px;}
    @media screen and (max-width:960px){
    .tab-content iframe{max-height:90%}}
    @media screen and (max-width:768px){
    .tab-content iframe{max-height:75%}}
    @media screen and (max-width:600px){
    .tab-content iframe{max-height:60%}}
    @media screen and (max-width:480px){
    .tab-content iframe{height:auto!important;max-height:auto!important}}
    </style>
    
  • Selanjutnya cari kode </body>, masukan javascript berikut di atasnya.
  • 
    <script>
    var myApp=angular.module('tabs',[]);
    myApp.controller('shift_tabs',function(){
      this.activeTab;
      this.makeShift=function(e){
        this.activeTab=e;
      }
      this.isActive=function(f){
        if(f==this.activeTab){
          return true
        }
      }
    });
    </script>
    
    Multi tab video streaming responsive ini memerlukan ajax,jika di template sobat belum terdapat scriptnya, silahkan masukan script berikut di atas kode </head>
    
    <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
    
    Jika di template agan sudah terpasang, lewati script ini.
  • Save template.

Cara memasang multi tab youtube responsive di postingan

  • Buat postingan baru, lalu masuk ke tab html, lihat gambar.
  • Membuat Multi Tab Video Streaming Responsive Di Blog
  • Copy dan masukan html dibawah ini ke dalam postingan..
  • 
    <div class='outer' ng-app='tabs'>
      <div class='tabs' ng-controller='shift_tabs as shift'>
        <div class='tab-buttons' ng-init='shift.makeShift(1)'>
          <button ng-click='shift.makeShift(1)' ng-class='{active:shift.isActive(1)}'>HD 720p</button>
          <button ng-click='shift.makeShift(2)' ng-class='{active:shift.isActive(2)}'>HD 720p</button>
          <button ng-click='shift.makeShift(3)' ng-class='{active:shift.isActive(3)}'>BRRIP 1080p</button>
        </div>
        <div class='tab-content'>
          <div ng-show='shift.isActive(1)'><iframe  src="https://www.youtube.com/embed/v8WjMiodcKo" frameborder="0" allowfullscreen></iframe></div>
          <div ng-show='shift.isActive(2)'><iframe src="https://www.youtube.com/embed/Wjyf44hTDco" frameborder="0" allowfullscreen></iframe></div>
          <div ng-show='shift.isActive(3)'><iframe  src="https://www.youtube.com/embed/CaObO42bjiI" frameborder="0" allowfullscreen></iframe></div>
        </div>
      </div>
    </div>
    
    Silahkan sesuaikan tulisan HD 720p, HD 720p, BRRIP 1080p. dengan tulisan yang kalian mau.
    Ganti juga url yang saya block seperti https://www.youtube.com/embed/v8WjMiodcKo, dengan url video kalian.
  • Selesai, tinggal di publikasikan.

Cukup sekian dan terimakasih, semoga artikel tentang Membuat Multi Tab Video Streaming Responsive Di Blog

Apabila ada yang mau bertanya, silahkan bertanya di kolom komentar.

video youtube responsive

13 komentar
  1. Masukin link ke dua dan ketiganya gimana gan? ??

    ReplyDelete
    Replies
    1. Nih gan, tinggal ganti link youtube ini dengan link video agan..
      https://www.youtube.com/embed/v8WjMiodcKo
      https://www.youtube.com/embed/Wjyf44hTDco
      https://www.youtube.com/embed/CaObO42bjiI

      Delete
    2. ok gan ...
      satu lagi nih ....
      ganti tulisan buttonnya gimana tuh ...
      rencana ane mau embed dari beberapa hosting
      maap ngrepotin

      Delete
    3. Tinggal cari tulisannya, lalu ganti gan..
      ada di bagian HTML
      <button ng-click='shift.makeShift(1)' ng-class='{active:shift.isActive(1)}'>HD 720p</button>

      Delete
  2. kenapa video saya putar semuanya??? bisa gk bikin load embednya???

    ReplyDelete
  3. terima kasih gan... berkat post tutorial akhir nya ane bisa mengerti.. ni hasilnya http://kagaminime.blogspot.co.id/2017/11/shoujo-shuumatsu-ryokou-episode-07.html

    ReplyDelete
  4. mantap gan, mau tak coba diblog saya :)
    karena untuk 1 video aja, ane mirrorin smpe 5 server :D
    sebelumnya cuma ane embed 1 aja, 4 sisanya cuma link doang..
    kalo pake ini user tinggal klik doang, tnp harus ninggalin blog :)

    makasih bro..

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. gan kalau buat di wordpress bisa gk ?

    ReplyDelete
  7. Cara merubah tinggi ukuran framenya gimana ya mas, terima kasih

    ReplyDelete