Overriding the playlist carousel click behaviour

When an item in a playlist carousel is clicked, the content video is changed. To override this behaviour, set the value of 0 for the data-item-clickable attribute on the playlist items. Sample code is shown below:

  // Wait for playlist carousel to finish rendering before manipulating the playlist items
  window.addEventListener('ivs.playlist.rendered', function (event) {
      // Prepend container ID to selector if there are multiple players on the same page
      let playlistItems = document.querySelectorAll('.ivs-overlay-playlistitem');

      playlistItems.forEach(function (item) {
          item.setAttribute('data-item-clickable', 0); // ignore original click listener

          // Add custom click listener, e.g. open up individual page in a new tab when clicked
          item.addEventListener('click', function (event) {
              let url = 'https://example.com/video?id=' + item.getAttribute('data-video-id');
              let win = window.open(url, '_blank');
              win.focus();
          });
      });
  });