{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./cartridges/app_belkin/cartridge/client/default/js/components/resourceArticles.js","webpack:///./cartridges/app_belkin/cartridge/client/default/js/experience.js","webpack:///./cartridges/app_core/cartridge/client/default/js/experience/components/video.js","webpack:///./sfra/cartridges/app_storefront_base/cartridge/client/default/js/util.js","webpack:///./vendor/app_storefront_core/cartridge/client/default/js/components/instagram.js","webpack:///./vendor/plugin_pagedesigner/cartridge/client/default/js/experience/spacer.js"],"names":[],"mappings":";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;AClFa;;AAEb;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;;AAEb;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAa;;AAEb;AACA;AACA,aAAa;;AAEb;AACA;AACA,aAAa;AACb;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,aAAa;;AAEb;AACA;AACA,aAAa;;AAEb;AACA;AACA,aAAa;AACb;AACA;AACA;;;;;;;;;;;;;AC7Ga;;AAEb,qBAAqB,mBAAO,CAAC,4FAAW;AACxC,uBAAuB,mBAAO,CAAC,yHAA+B;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB,aAAa;AACb;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,SAAS;AACT;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,QAAQ;AACR;;AAEA;AACA,mBAAmB,mBAAO,CAAC,qHAAgC;AAC3D,mBAAmB,mBAAO,CAAC,6HAAqC;AAChE;AACA;;AAEA;AACA,mBAAmB,mBAAO,CAAC,mHAA2B;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,YAAY;AACZ,QAAQ;AACR;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA,CAAC;;AAED;AACA;AACA,CAAC;;;;;;;;;;;;;ACzJY;;AAEb;AACA;AACA,qBAAqB;AACrB,mBAAmB;;AAEnB;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB;AACzB;AACA;AACA;AACA,qBAAqB;;AAErB;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB;AACzB;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB;AACzB;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA,aAAa;AACb;;AAEA;AACA;AACA,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,aAAa;;AAEb;AACA;;AAEA;AACA;AACA;;AAEA,aAAa;AACb;;AAEA;AACA;AACA,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB,aAAa;AACb;AACA;AACA;;AAEA;AACA;AACA,iBAAiB;AACjB;AACA;;AAEA;AACA;AACA,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;;AAEA;AACA;AACA,mBAAmB,OAAO;AAC1B;AACA;AACA;;AAEA;AACA,CAAC;;AAED;AACA;AACA,WAAW,OAAO;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,SAAS;AACT;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,oIAAoI;AACpI;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA,KAAK;AACL;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA,CAAC;;AAED;;;;;;;;;;;;;ACpRa;;AAEb;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;;;;;;;;;;;;;ACXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,eAAe;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA;;AAEA,2DAA2D,KAAK,GAAG,uCAAuC,aAAa,GAAG,eAAe,KAAK,IAAI,KAAK,gCAAgC,KAAK,6DAA6D,+BAA+B,SAAS,KAAK,WAAW,GAAG,kCAAkC,QAAQ;AAC9V;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;;AAEA,WAAW,YAAY;AACvB;AACA;AACA,EAAE;AACF,E;;;;;;;;;;;;ACtEa;;AAEb;AACA;AACA;AACA,KAAK;AACL,CAAC","file":"default/js/experience.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./cartridges/app_belkin/cartridge/client/default/js/experience.js\");\n","'use strict';\n\nfunction syncArticleHeights() {\n $('.article-tiles .tile-figure').matchHeight();\n $('.article-tiles .tile-top').matchHeight();\n $('.article-tiles .tile-description').matchHeight();\n}\n\nmodule.exports = {\n pdp: function () {\n var articleData = $('#resource-article-data').text() ? JSON.parse($('#resource-article-data').text()) : null;\n var $articlesContainer = $('.resource-articles');\n var $articleTemplate = $('.resource-articles .article.template');\n\n if (articleData) {\n $.each(articleData, function (key) {\n $articleTemplate.clone().appendTo($articlesContainer).removeClass('template').addClass('tile-' + articleData[key].id);\n var $thisTile = $('.tile-' + articleData[key].id);\n if (articleData[key].custom.articleImage) {\n $thisTile.find('.tile-image').attr('data-src', articleData[key].custom.articleImage);\n }\n if (articleData[key].custom.articleImageAlt) {\n $thisTile.find('.tile-image').attr('alt', articleData[key].custom.articleImageAlt);\n }\n if (articleData[key].custom.articleTitle) {\n $thisTile.find('.tile-title .tile-title-inner').text(articleData[key].custom.articleTitle);\n }\n if (articleData[key].custom.articleDesc) {\n $thisTile.find('.tile-description .tile-description-inner').text(articleData[key].custom.articleDesc);\n }\n if (articleData[key].custom.articleURL) {\n $thisTile.find('.button-component .btn').attr('href', articleData[key].custom.articleURL);\n }\n });\n }\n },\n pdSingle: function () {\n var $pdArticles = $('.pd.resource-article-data');\n\n if ($pdArticles.length) {\n $pdArticles.each(function (i) {\n try {\n var articleData = JSON.parse($(this).text());\n } catch (e) {\n return false;\n }\n\n var $articleTile = $(this).siblings('.article');\n\n $articleTile.removeClass('template col-4 col-3 col').addClass('tile-' + articleData.id);\n if (articleData.custom.articleImage) {\n $articleTile.find('.tile-image').attr('data-src', articleData.custom.articleImage);\n }\n if (articleData.custom.articleImageAlt) {\n $articleTile.find('.tile-image').attr('alt', articleData.custom.articleImageAlt);\n }\n if (articleData.custom.articleTitle) {\n $articleTile.find('.tile-title .tile-title-inner').text(articleData.custom.articleTitle);\n }\n if (articleData.custom.articleDesc) {\n $articleTile.find('.tile-description .tile-description-inner').text(articleData.custom.articleDesc);\n }\n if (articleData.custom.articleURL) {\n $articleTile.find('.article-url').attr('href', articleData.custom.articleURL);\n }\n });\n\n syncArticleHeights();\n\n // hide all tiles beyond 6 in each grouping\n $('.article-tile-block:not(.editing) .article-tile-outer:nth-child(n+7)').addClass('js-hidden');\n\n $('.view-all-articles').on('click', function () {\n $(this).parents('.article-tile-block').find('.article-tile-outer').removeClass('js-hidden');\n $(this).parents('.article-tile-summary').remove();\n });\n\n $(window).smartresize(function () {\n syncArticleHeights();\n });\n\n $(document).on('lazyloaded', function (e) {\n syncArticleHeights();\n });\n }\n },\n compTileBlock: function () {\n var $articleTileBlock = $('.experience-commerce_layouts-articleTileBlock .article-tile-block');\n var maxItems = parseInt($articleTileBlock.attr('data-max-items')) + 1;\n\n if ($articleTileBlock.length) {\n syncArticleHeights();\n\n // hide all tiles beyond 6 in each grouping\n $('.article-tile-block:not(.editing) .article-tile-outer:nth-child(n+' + maxItems + ')').addClass('js-hidden');\n $('.view-all-articles').on('click', function () {\n $(this).parents('.article-tile-block').find('.article-tile-outer').removeClass('js-hidden');\n $(this).parents('.article-tile-summary').remove();\n });\n\n $(window).smartresize(function () {\n syncArticleHeights();\n });\n\n $(document).on('lazyloaded', function (e) {\n syncArticleHeights();\n });\n }\n }\n};\n","'use strict';\n\nvar processInclude = require('base/util');\nvar resourceArticles = require('./components/resourceArticles');\n/**\n * Set the content slide Height for the carousel\n */\nfunction setContentSlideHeight() {\n $('.experience-component .carousel').each(function () {\n if ($(this).find('.pd-slider .content-tile').length > 0) {\n $(this).find('.pd-slider').on('init', function (event, slick) {\n $(document).on('lazyloaded', function (e) {\n if ($(e.target).parents('.content-tile-container').length > 0) {\n $(this).find('.content-tile-container').matchHeight();\n }\n });\n });\n }\n });\n}\n/**\n * adjust height and check for videos etc\n */\nfunction pdSlider() {\n setContentSlideHeight();\n\n if ($('.pd-slider.slick-initialized').length) {\n $('.pd-slider').slick('unslick');\n }\n\n // Video slide pause\n if ($('.mainbanner-figure video').length) {\n // Play video inside the current slide\n $('.pd-slider').on('afterChange', function (event, slick, currentSlide) {\n if ($('.slick-slide.slick-current').find('video').length !== 0) {\n $('.pd-slider').slick('slickPause');\n $('.pd-slider .slick-current video')[0].play();\n }\n });\n $('video').on('ended', function () {\n // console.log('Video Complete');\n $('.pd-slider').slick('slickPlay');\n });\n }\n\n // Detect if page in in the editor\n if (window.location !== window.parent.location) {\n $('.experience-page').addClass('in-editor');\n\n $('.experience-component .carousel').each(function () {\n if (!$(this).hasClass('edit-mode')) {\n $(this).find('.pd-slider').slick();\n }\n });\n } else {\n $('.experience-component .carousel').each(function () {\n $(this).find('.pd-slider').slick();\n });\n }\n}\n/**\n * get the custom colors\n */\nfunction getCustomColors() {\n let customBtn = document.querySelectorAll('.btn-custom');\n if (customBtn.length) {\n for (let b = 0; b < customBtn.length; b++) {\n customBtn[b].style.setProperty('--bgColor', customBtn[b].dataset.bgcolor);\n customBtn[b].style.setProperty('--textColor', customBtn[b].dataset.textcolor);\n customBtn[b].style.setProperty('--borderColor', customBtn[b].dataset.bordercolor);\n customBtn[b].style.setProperty('--bgColorHover', customBtn[b].dataset.bgcolorhover);\n customBtn[b].style.setProperty('--textColorHover', customBtn[b].dataset.textcolorhover);\n customBtn[b].style.setProperty('--borderColorHover', customBtn[b].dataset.bordercolorhover);\n }\n }\n}\n\n/**\n * Create count up functionality of number box\n */\n// function numberCountUp() {\n// $('.number-box .number-value').each(function () {\n// var $this = $(this);\n// var str = $this.text();\n// console.log('String', str);\n// var number = str.match(/(\\d+,\\d+)/g).replace(/,/g, '');\n// console.log('Num', number);\n\n// var str = numString.replace(/(\\d+)/g, '$1');\n\n// });\n// }\n\n$(document).ready(function () {\n processInclude(require('pagedesigner/experience/spacer'));\n processInclude(require('appCore/experience/components/video'));\n resourceArticles.pdSingle();\n resourceArticles.compTileBlock();\n\n // Include Instagram client JS\n processInclude(require('core/components/instagram'));\n\n $('.pd-text-slider').slick({\n dots: true,\n arrows: true,\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1\n });\n $('.pd-support-slider').slick({\n dots: true,\n arrows: true,\n infinite: true,\n slidesToShow: 4,\n slidesToScroll: 1,\n responsive: [\n {\n breakpoint: 1200,\n settings: {\n slidesToShow: 3\n }\n },\n {\n breakpoint: 768,\n settings: {\n slidesToShow: 1\n }\n }\n ]\n });\n\n // Detect if page in in the editor\n // if (window.location !== window.parent.location) {\n // $('.experience-page').addClass('in-editor');\n\n // $('.experience-component .carousel').each(function (index) {\n // if (!$(this).hasClass('edit-mode')) {\n // $(this).find('.pd-slider').slick();\n // }\n // });\n // } else {\n // $('.pd-slider').slick();\n // }\n pdSlider();\n getCustomColors();\n});\n\n$(document).on('lazyloaded', function (e) {\n $('.experience-commerce_layouts-featuredBar .featured-item').matchHeight();\n});\n\n$(window).smartresize(function () {\n //pdSlider();\n});\n","'use strict';\n\nvar Video = (function () {\n // VARIABLES\n var players = []; // players array (to control players individually)\n var queue = []; // videos queue (once api is ready, transform this into YT player)\n\n // Constructor\n function videos() {}\n\n // METHODS\n // Add elements to queue\n videos.prototype.add = function ($video) {\n queue.push($video);\n };\n\n // Load YT API\n videos.prototype.loadApi = function () {\n var tag = document.createElement('script');\n\n tag.src = 'https://www.youtube.com/iframe_api';\n var firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n window.onYouTubeIframeAPIReady = function () {\n queue.forEach(function ($video) {\n // Create the YT player\n if ($video.attr('data-type') === 'in-modal') {\n var player = new YT.Player($video.get(0), {\n width: '100%',\n height: '100%',\n videoId: $video.data('id'),\n playerVars: {\n autoplay: 0,\n mute: 0,\n controls: 1,\n modestbranding: 0,\n playsinline: 1,\n rel: 0,\n loop: 0\n },\n events: {\n onReady: onModalPlayerReady\n }\n });\n\n // add to players array\n players.push(player);\n } else if ($video.attr('data-type') === 'in-page') {\n // Create the YT player\n var player = new YT.Player($video.get(0), {\n width: '100%',\n height: '100%',\n videoId: $video.data('id'),\n playerVars: {\n autoplay: 0,\n mute: 0,\n controls: 1,\n modestbranding: 0,\n playsinline: 1,\n rel: 0,\n loop: 0\n },\n events: {\n onReady: onPlayerReady\n }\n });\n // add to players array\n players.push(player);\n } else if ($video.attr('data-type') === 'vid-bg') {\n var player = new YT.Player($video.get(0), {\n width: '100%',\n height: '100%',\n videoId: $video.data('id'),\n playerVars: {\n // autoplay: 1,\n mute: 1,\n controls: 0,\n modestbranding: 1,\n playsinline: 1,\n rel: 0,\n loop: 1,\n playlist: $video.data('id')\n },\n events: {\n onReady: onBgVidPlayerReady,\n onStateChange: onPlayerStateChange\n }\n });\n // add to players array\n players.push(player);\n }\n });\n };\n\n /**\n * Set events on player ready\n * @param {Object} event - contains event data\n */\n function onModalPlayerReady(event) {\n var $iframe = $(event.target.getIframe());\n var $modal = $iframe.parents('.modal');\n var componentID = $modal.attr('data-modalcomponentid');\n var $pairedComponent = $('.pd-video-component[data-componentid=' + componentID + ']');\n var $vidPoster = $pairedComponent.find('.poster video');\n\n $modal.on('show.bs.modal', function () {\n event.target.playVideo();\n\n if($vidPoster) {\n $vidPoster.get(0).pause();\n // $vidPoster.get(0).currentTime = 0;\n }\n });\n\n $modal.on('hide.bs.modal', function () {\n event.target.stopVideo();\n\n if($vidPoster) {\n $vidPoster.get(0).play();\n }\n\n });\n }\n\n /**\n * Set events on player ready\n * @param {Object} event - contains event data\n */\n function onPlayerReady(event) {\n var $iframe = $(event.target.getIframe());\n var $figure = $iframe.parents('.main-figure');\n var $poster = $figure.find('.poster');\n var $heading = $figure.find('.image-heading-container');\n var $vidfigure = $figure.find('.video-figure');\n\n if (window.matchMedia('(min-width: 48em)').matches) {\n $poster.add($heading).on('click', function () {\n $poster.addClass('js-hidden');\n $heading.addClass('js-hidden');\n $vidfigure.show();\n event.target.playVideo();\n });\n } else {\n var compID = $iframe.parents('.pd-video-component').attr('data-componentid');\n var modalID = 'modal-' + compID;\n var $modal = $('#' + modalID);\n\n $poster.add($heading).on('click', function () {\n $modal.modal('show');\n });\n }\n }\n\n /**\n * Set events on player ready\n * @param {Object} event - contains event data\n */\n function onBgVidPlayerReady(event) {\n // play video if it's on screen on page load\n var scrollPos = $(window).scrollTop();\n var screenBottom = $(document).scrollTop() + window.innerHeight;\n var $iframe = $(event.target.getIframe());\n var $banner = $iframe.parents('.experience-commerce_assets-mainBanner');\n var videoOffscreen = $iframe.outerHeight() / 4;\n var vidTop = $iframe.offset().top;\n var setStatus = (scrollPos <= vidTop + videoOffscreen && screenBottom >= vidTop + videoOffscreen) ? 'play' : 'pause';\n $banner.addClass('js-has-video');\n\n if (event.target.getPlayerState() === 1 || event.target.getPlayerState() === 3) {\n $banner.removeClass('js-paused').addClass('js-playing');\n }\n\n if ((event.target.getPlayerState() === 5 || event.target.getPlayerState() === 2) && setStatus === 'play') {\n // If the video is currently paused or unstarted, and our video has been scrolled into view, play it.\n event.target.playVideo();\n $banner.removeClass('js-paused').addClass('js-playing');\n }\n\n $(window).on('scroll', function () {\n scrollPos = $(window).scrollTop();\n screenBottom = $(document).scrollTop() + window.innerHeight;\n $iframe = $(event.target.getIframe());\n videoOffscreen = $iframe.outerHeight() / 4;\n vidTop = $iframe.offset().top;\n\n // play video when over half of it has been scrolled into view, pause when over half is offscreen\n setStatus = (scrollPos <= vidTop + videoOffscreen && screenBottom >= vidTop + videoOffscreen) ? 'play' : 'pause';\n\n if ((event.target.getPlayerState() === 5 || event.target.getPlayerState() === 2) && setStatus === 'play') {\n // If the video is currently paused or unstarted, and our video has been scrolled into view, play it.\n event.target.playVideo();\n $banner.removeClass('js-paused').addClass('js-playing');\n }\n\n if (event.target.getPlayerState() === 1 && setStatus === 'pause') {\n // If the video is currently playing, and our video has been scrolled out of view, pause it.\n event.target.pauseVideo();\n $banner.removeClass('js-playing').addClass('js-paused');\n }\n });\n }\n\n /**\n * Set change events\n * @param {Object} event - contains event data\n */\n function onPlayerStateChange(event) {}\n };\n\n return videos;\n}());\n\n/**\n * Create click events for each video to be opened in a modal\n * @param {Object} $player - jquery object referencing the video player\n */\nfunction createModalClicks($player) {\n if ($player.attr('data-playinmodal') === 'true') {\n var $poster = $player.find('.poster');\n var $heading = $player.find('.image-heading-container');\n var compID = $player.attr('data-componentid');\n var modalID = 'modal-' + compID;\n var $modal = $('#' + modalID);\n\n $poster.add($heading).on('click', function () {\n $modal.modal('show');\n });\n }\n}\n\n/**\n * When Attribute Enabled create modal elements for each applicable video\n */\nfunction createVideoModals() {\n var $players = $('.pd-video-component');\n\n $players.each(function () {\n var $player = $(this);\n var videoID = $player.attr('data-videoid');\n var compID = $player.attr('data-componentid');\n\n var modalID = 'modal-' + compID;\n var videoModal = '