<div class="w-ba-banner ba-banner-widget-2 ba-banner-widget-youtube">
  <div class="w-ba-banner__wrap  cycle-slideshow"
      data-list="images"
      data-level="0"
      data-cycle-timeout="10000"
      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=".w-ba-banner__pager-2 .banner_caption_{{subpart-id}}"
      data-pager-template="<li><a href='#'></a></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"
      >

    {{html}}
  </div>
    <ul class="w-ba-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
    <ul class="button-mid">
		<button class="prev-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></button>
		<button class="next-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></button>
	</ul>
    </div>
<script type="text/javascript">
  if (typeof ad_banners_count === 'undefined'){
    var ad_banners_count = 0;
  }

  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);
  }

  $("document").ready(function(){
    $("*[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'){
  function onYouTubeIframeAPIReady(){
    $(".w-ba-banner iframe[data-yt-api-binded=0]").each(function(){
      $(this).attr("data-yt-api-binded","1");
       new YT.Player($(this).attr("id"), {
            events: {
              'onStateChange': onPlayerStateChange
            }
        });
    })
  }

  function onPlayerStateChange(event){
    var iframe = $(event.target.getIframe()),
        cyclediv = iframe.parents("div.cycle-slideshow");
    if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
      cyclediv.cycle("pause");
    }else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
      cyclediv.cycle("resume");
    }
  }
}
</script>