app/template/plugin/ApgVideoInsert42/front/render_product_detail_js.twig line 1

Open in your IDE?
  1. {% if youtubeVideoId is defined and youtubeVideoId %}
  2.     <script>
  4.         $(function () {
  5.             const tag = document.createElement('script');
  6.             tag.src = "https://www.youtube.com/iframe_api";
  7.             const firstScriptTag = document.getElementsByTagName('script')[0];
  8.             firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  9.         });
  12.         {% if videoInsertType is  defined and videoInsertType == constant('Plugin\\ApgVideoInsert42\\Domain\\VideoInsertType::SLIDE') %}
  13.         $(function () {
  14.             $(".item_visual").on("beforeChange", function (event, slick) {
  15.                 slick = $(slick.$slider);
  16.                 playPauseVideo(slick, "pause");
  17.             });
  18.             $(".item_visual").on("afterChange", function (event, slick) {
  19.                 slick = $(slick.$slider);
  20.                 playPauseVideo(slick, "play");
  21.             });
  22.             $(".item_visual").on('init', function (slick) {
  23.                 $('.slick-dots .apg_video_youtube_player_image').show();
  24.             });
  25.         });
  27.         {% endif %}
  29.         let player;
  31.         function onYouTubeIframeAPIReady() {
  32.             $('.apg_video_youtube_player_image').hide();
  33.             $('.slick-dots .apg_video_youtube_player_image').show();
  34.             {% if videoInsertType is  defined and videoInsertType == constant('Plugin\\ApgVideoInsert42\\Domain\\VideoInsertType::SLIDE') %}
  35.             let ifram_height = $('.apg_video_youtube_player_image:first').height();
  36.             if (!ifram_height || ifram_height < 360) {
  37.                 if (window.matchMedia('(max-width: 767px)').matches) {
  38.                     ifram_height = '360';
  39.                 } else {
  40.                     ifram_height = '480';
  41.                 }
  42.             }
  43.             {% else %}
  44.             ifram_height = '480';
  45.             if (window.matchMedia('(max-width: 767px)').matches) {
  46.                 ifram_height = '360';
  47.             }
  48.             {% endif %}
  49.             $('.apg_video_youtube').height(ifram_height);
  50.             let targetDom = null;
  51.             if($('#apg_video_youtube_player').length > 0){
  52.                 targetDom = $('#apg_video_youtube_player')[0]
  53.             } else if($('.apg_video_youtube_player').length > 0) {
  54.                 targetDom = $('.apg_video_youtube_player')[0]
  55.             }
  56.             if(targetDom !== null){
  57.                 player = new YT.Player(targetDom, {
  58.                     height: ifram_height,
  59.                     width: '1000',
  60.                     videoId: '{{ youtubeVideoId }}',
  61.                     events: {
  62.                         'onReady': onPlayerReady,
  63.                         'onStateChange': onPlayerStateChange
  64.                     },
  65.                     playerVars: {}
  66.                 });
  67.             }
  68.         }
  70.         function onPlayerReady(event) {
  71.             {% if videoInsertType is  defined and videoInsertType == constant('Plugin\\ApgVideoInsert42\\Domain\\VideoInsertType::SLIDE') %}
  72.             event.target.playVideo();
  73.             {% endif %}
  74.             event.target.mute();
  75.         }
  77.         function onPlayerStateChange(event) {
  78.         }
  80.         function playVideo(time) {
  81.             player.seekTo(time);
  82.             player.playVideo();
  83.         }
  85.         function stopVideo() {
  86.             player.stopVideo();
  87.         }
  89.         function playPauseVideo(slick, control) {
  90.             const currentSlide = slick.find(".slick-active");
  91.             const player = currentSlide.find("iframe").get(0);
  93.             switch (control) {
  94.                 case "play":
  95.                     if (player) {
  96.                         playVideo(0);
  97.                     }
  98.                     break;
  99.                 case "pause":
  100.                     if (player) {
  101.                         stopVideo();
  102.                     }
  103.                     break;
  104.             }
  105.         }
  106.     </script>
  107. {% endif %}