adbanner-test/modules/ad_banner/_ad_banner_widget2_video.html.erb

<div class="w-ad-banner ad-banner-widget-2 w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
  <div class="w-ad-banner__wrap  w-ba-banner__wrap  cycle-slideshow"
      data-list="images"
      data-level="0"
      data-cycle-slides=".w-ba-banner__slide"
      data-cycle-log="false"
      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
      data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
      data-cycle-auto-height="{{base_image}}"
      data-cycle-speed="{{speed}}"
      data-cycle-timeout="{{timeout}}"
      data-cycle-fx="{{ad_fx}}"
      data-pager=".banner_caption_{{subpart-id}}"
      data-pager-template="<li><button title='pager'></button></li>"
      data-pager-active-class="active-slide"
      data-cycle-youtube="true"
      data-cycle-youtube-autostart="false"
      data-cycle-swipe="true"
      data-cycle-prev=".banner_prev"
      data-cycle-next=".banner_next"
      data-cycle-pause-on-hover="true"
      style="padding-bottom: 56.25%;"
      >

    {{html}}
  </div>
  <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
    <div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
    <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
    <ul class="button-mid">
      <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
      <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
    </ul>
  </div>
</div>
<script type="text/javascript">
  var ad_trigger_time;
  if (typeof ad_banners_count === 'undefined'){
    var ad_banners_count = 0;
  }
  function ad_audio_button(ele,is_stop){
    var $self = $(ele);
    var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
    if (is_stop){
      button_container.find('.jarallax-video-audio').remove();
    }else{
      var audio_div;
      if ($self.hasClass('have-audio')){
        audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i></button>');
      }else{
        audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i></button>');
      }
      audio_div.click(function(event) {
        var currentTime = new Date();
        if (ad_trigger_time&&currentTime-ad_trigger_time<500){
          return false;
        }else{
          ad_trigger_time = currentTime;
        }
        event.stopPropagation();
        var $video = $self.find('video');
        if ($self.hasClass('have-audio')){
          $self.removeClass('have-audio');
          $(this).attr('title','<%= I18n.t("ad_banner.unmuted") %>').find('i.fas').attr('class','fas fa-volume-mute').attr('aria-label','<%= I18n.t("ad_banner.unmuted") %>');
        }else{
          $self.addClass('have-audio');
          $(this).attr('title','<%= I18n.t("ad_banner.muted") %>').find('i.fas').attr('class','fas fa-volume-up').attr('aria-label','<%= I18n.t("ad_banner.muted") %>');
        }
        if ($video.length>0){
          $self.jPlayer("mute", !$self.data().jPlayer.options.muted);
        }else{//youtube
          var player = $self.find('iframe').data("yt_player");
          if (player.isMuted()){
            player.unMute();
          }else{
            player.mute();
          }
        }
      });
      button_container.find('.jarallax-video-audio').remove();
      button_container.append(audio_div);
    }
  }
  if(document.getElementById("youtube-iframe-api") == null){
    var tag = document.createElement('script');
    tag.setAttribute("id", "youtube-iframe-api");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
  $("*[data-yt-binded=0]").each(function(){
    $(this).attr("data-yt-binded","1");
    var obj = $(this).find("iframe");
    obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
    ad_banners_count++;
  })
if (typeof onYouTubeIframeAPIReady !== 'function'){
  $(document).ready(function() {
    $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
      $(this).trigger('click');
    });
  });
  if(window.yt_players == undefined)
    window.yt_players = {};
  function find_out_yt_event_list_key(yt_player){
    var defalt_key = 'o';
    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
    var prop_nums_thresh = 6;
    if(all_keys.indexOf(defalt_key) != -1){
      if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
        return defalt_key;
      }
    }
    var event_key;
    all_keys.forEach(function(k){
      if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
        event_key = k;
        return false;
      }
    })
    return event_key;
  }
  function find_out_yt_event_list_count_key(yt_player, event_list_key){
    var defalt_key = 'v';
    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
    var equal_count = yt_player[event_list_key].length;
    if(all_keys.indexOf(defalt_key) != -1){
      if(yt_player[defalt_key] == equal_count){
        return defalt_key;
      }
    }
    var count_key;
    all_keys.forEach(function(k){
      if(yt_player[k] == equal_count){
        count_key = k;
        return false;
      }
    })
    return count_key;
  }
  function find_out_yt_event_list_array_key(event_dict){
    var defalt_key = 'i';
    var all_keys = Object.keys(event_dict);
    if(all_keys.indexOf(defalt_key) != -1){
      if(Array.isArray(event_dict[defalt_key]) && event_dict[defalt_key].indexOf('onStateChange') != -1){
        return defalt_key;
      }
    }
    var array_key;
    all_keys.forEach(function(k){
      if(Array.isArray(event_dict[k]) && event_dict[k].indexOf('onStateChange') != -1){
        array_key = k;
        return false;
      }
    })
    return array_key;
  }
  function find_out_yt_event_relation_key(event_dict){
    var defalt_key = 'j';
    var all_keys = Object.keys(event_dict);
    if(all_keys.indexOf(defalt_key) != -1){
      if((event_dict[defalt_key] instanceof Object) && event_dict[defalt_key]['onStateChange']){
        return defalt_key;
      }
    }
    var relation_key;
    all_keys.forEach(function(k){
      if((event_dict[k] instanceof Object) && event_dict[k]['onStateChange']){
        relation_key = k;
        return false;
      }
    })
    return relation_key;
  }
  function onYouTubeIframeAPIReady(){
    $(".w-ba-banner").each(function(i,banner){
      var iframes = $(banner).find("iframe");
      if(iframes.length > 0){
        var id = $(banner).attr("data-subpart-id");
        if(yt_players[id] == undefined)
          yt_players[id] = {};
        var remove_ids = [];
        Object.keys(yt_players[id]).forEach(function(k){
          var yt_player = yt_players[id][k];
          if($(yt_player.getIframe()).length == 0){
            yt_player.destroy();
            remove_ids.push(k);
          }
        })
        remove_ids.forEach(function(k){
          delete yt_players[id][k];
        })
        iframes.each(function(i,iframe){
          var yt_player = yt_players[id][$(iframe).attr("id")];
          if(yt_player){
          }else{
            yt_player = new YT.Player($(iframe).attr("id"), {
                events: {
                  'onReady': function(event){
                    var height = $(event.target.getIframe()).height();
                    var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
                    banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
                    banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
                    try{
                      delete (event.target.B || event.target.H || event.target.I).onStateChange;
                    }catch(e){console.log("{onReady: true, onStateChange: true} missing!")};
                    var event_list_key = find_out_yt_event_list_key(event.target);
                    if(event_list_key){
                      var event_dict = event.target[event_list_key];
                      var array_key = find_out_yt_event_list_array_key(event_dict);
                      var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
                      var relation_key = find_out_yt_event_relation_key(event_dict);
                      var onStateChange_idx = event_dict[relation_key].onStateChange;
                      onStateChange_idx.reverse();
                      var event_size = 3;
                      onStateChange_idx.forEach(function(start_idx){
                        event_dict[array_key].splice(start_idx,event_size);
                      });
                      event_dict[relation_key].onStateChange = [];
                      event_dict[count_key] = event_dict[array_key].length;
                      event.target.addEventListener('onStateChange',onPlayerStateChange);
                    }else{
                      console.log("YT player changes its variables!")
                    }
                    {{extra_ready_script}}
                  },
                  'onStateChange': onPlayerStateChange
                }
            });
            yt_players[id][$(iframe).attr("id")] = yt_player;
            $(iframe).data("yt_player",yt_player);
          }
        })
      }
    })
  }
  function onPlayerStateChange(event){
    var iframe = $(event.target.h),
        cyclediv = iframe.parents("div.cycle-slideshow");
    var widget = cyclediv.parents('.ba-banner-widget-youtube');
    if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
      cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
      cyclediv.cycle("pause");
      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
    }else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
      if(cyclediv[0].need_resume)
        cyclediv.cycle("resume");
      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
    }
    {{extra_state_chnage_script}}
  }
}
  $(document).ready(function(){
    window.onYouTubePlayerAPIReady = function() {
      onYouTubeIframeAPIReady.apply(this,arguments);
    };
    var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
    var opts = banner_wrap.data('cycle.opts');
    banner_wrap.on('cycle-paused',function(opts){
      var controlplay = $(this).nextAll(".controlplay");
      if(controlplay.length != 0){
        controlplay.find(".resume-slide").removeClass("active");
        controlplay.find(".pause-slide").addClass("active");
      }
    })
    banner_wrap.on('cycle-resumed',function(opts){
      var controlplay = $(this).nextAll(".controlplay");
      if(controlplay.length != 0){
        controlplay.find(".resume-slide").addClass("active");
        controlplay.find(".pause-slide").removeClass("active");
      }
    })
    /*
    var height = opts.slides.filter('.active').height() || opts.slides.height();
    banner_wrap.height(height)*/
    banner_wrap.css("padding-bottom","");
    {{extra_document_ready_script}}
    $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
      $(this).addClass('active');
      $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
    });
    $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
      $(this).addClass('active');
      $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
    });
    $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
    })
    $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
    })
    var resize_timeout_id;
    $(window).resize(function(){
      if(resize_timeout_id){
        window.clearTimeout(resize_timeout_id);
      }
      resize_timeout_id = window.setTimeout(function(){
        var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
        var opts = banner_wrap.data('cycle.opts');
        var height = opts.slides.filter('.active').height() || opts.slides.height();
        banner_wrap.height(height).css("padding-bottom","");
      },300);
    })
  })
</script>
<style type="text/css">
  .jarallax-video-audio{
    z-index: 201;
    font-size: 36px;
    color: #FFF;
    text-align: center;
    position: absolute;
    top: 2%;
    right: 2%;
    height: 66px;
    width: 66px;
    border-radius: 50%;
    line-height: 1.8;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,.6);
    background-color: rgba(0,0,0,.6);
    transition: all 1.2s ease;
  }
  @media (max-width: 768px){
    .jarallax-video-audio{
      top: 50%;
    }
  }
  .jarallax-video-audio:hover,.jarallax-video-audio:focus{
    color: #FFC500;
    transition: all 0.6s ease;
  }

  .w-ba-banner .controlplay .resume-slide.active i{
    color: #32D9C3;
  }
  .w-ba-banner .controlplay .pause-slide.active i{
    color: #ff4500;
  }
  .w-ba-banner .controlplay{
    width: auto;
  }
  .w-ba-banner .button-mid{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .next-button,.prev-button{
    cursor: pointer;
  }
</style>