jwp-play-list.js

// LOAD needed player 
<script async src="https://content.jwplatform.com/libraries/{{YOUR-PLAYER-ID}}.js"></script>
document.addEventListener('DOMContentLoaded', event => {
    // workaround to autoplay video
    if (document.querySelector('.top-splash .widget__video')) {
		document.querySelector('.top-splash .widget__image').click();  
    }
});
  
function playlists() {
    let widgets = document.querySelectorAll('.playlist-posts .widget:not(.extended)');
  
    widgets.forEach(function(widget) {
        let playlistBody = document.createElement('div');
        let lead = widget.querySelector('.widget__head');
    
        widget.classList.add('extended');
        playlistBody.classList.add('playlist-body');
        widget.querySelector('#col-center').appendChild(playlistBody);

        
        if (!lead) {
            widget.querySelectorAll('.widget__body')[1]
                .insertAdjacentHTML('beforebegin', '<div class="widget__head"><div class="widget__video crop-16x9 clearfix"></div></div>');
        } else if (lead && !lead.querySelector('.widget__video')) {
            let videoHead = document.createRange().createContextualFragment('<div class="widget__video crop-16x9 clearfix" style="display:none"></div>');
            lead.appendChild(videoHead);
        }
    
        let video = widget.querySelector('.widget__video');
        let image = widget.querySelector('.widget__image');
        let rebelltItems = widget.querySelectorAll('.rebellt-item');
    
        rebelltItems.forEach((rebelltItem, index) => {
            let videoUrl;
            let videoPlayer = document.createElement('div');
            let listicUrl = rebelltItem.getAttribute('data-href');
            let videoID =  rebelltItem.getAttribute('data-video-id');       

            //jwp streaming doesn't work in some mobile devises
            if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
                videoUrl = 'https://content.jwplatform.com/videos/'+videoID+'.mp4';
            } else {
                videoUrl = 'https://content.jwplatform.com/manifests/'+videoID+'.m3u8';
            }
            
            videoPlayer.id = 'jwPlayer-' + videoID;

            if (videoID) {
                if( index === 0 && !image ) {
                    video.style.display = "block";
                    video.appendChild(videoPlayer);
                    let playerInstance = jwplayer(videoPlayer.id);
                    
                    playerInstance.setup({
                        file: videoUrl,
                        mediaid: videoID,
                        autostart: false,
                        image: `https://cdn.jwplayer.com/v2/media/${videoID}/poster.jpg`
                });   
            }

            rebelltItem.onclick = () => {
                if (widget.querySelector('.jwplayer')) { 
                    widget.querySelector('.jwplayer').remove();
                }

                if (listicUrl.length > 0 && listicUrl) {
                    window.history.pushState("", "", listicUrl);
                }

                let content = rebelltItem.cloneNode(true);

                if (content.querySelector('.media-photo-preview') ) {
                    content.querySelector('.media-photo-preview').remove();
                } else if ( content.querySelector('.rm-shortcode') ) {
                    content.querySelector('.rm-shortcode').remove();
                }
          
                widget.querySelector('.playlist-body').innerHTML = "";
                widget.querySelector('.playlist-body').appendChild(content);

                image.classList.add('hidden');
                video.style.display = 'block';
                video.appendChild(videoPlayer);
                
                let playerInstance = jwplayer(videoPlayer.id);
                playerInstance.setup({
                    file: videoUrl,
                    mediaid: videoID
                });
                if (window.innerWidth < 1024) {
                    window.scrollTo({ top: widget.offsetTop, behavior: 'smooth' }); 
                }
            }
        }
    });
    });
};
playlists();
  
{{require}}(['core/event_dispatcher'], function(eventDispatcher) {
   eventDispatcher.on('load-more:sync', () => playlists());
});