<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></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 class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul> <ul class="button-mid"> <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i> <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "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 = $('<div class="jarallax-video-audio"><i class="fas fa-volume-up"></i></div>'); }else{ audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-mute"></i></div>'); } audio_div.click(function(event) { var currentTime = new Date(); if (ad_trigger_time&¤tTime-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).find('i.fas').attr('class','fas fa-volume-mute'); }else{ $self.addClass('have-audio'); $(this).find('i.fas').attr('class','fas fa-volume-up'); } 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 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"); delete (event.target.B || event.target.H).onStateChange; var onStateChange_idx = event.target.l.i.onStateChange; onStateChange_idx.reverse(); var event_size = 3; onStateChange_idx.forEach(function(start_idx){ event.target.l.h.splice(start_idx,event_size); }); event.target.l.i.onStateChange = []; event.target.l.s = event.target.l.h.length; event.target.addEventListener('onStateChange',onPlayerStateChange); {{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}} $('.pause-slide').off('click').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'); }); $('.resume-slide').off('click').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'); }); $('.next-button').off('click').on('click',function(){ $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next"); }) $('.prev-button').off('click').on('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{ 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>