Thumbnails grid url video

[ta_io]

It would be interesting to put an external URL in video thumbnails grid like one from Vimeo https://player.vimeo.com/ since the loading of videos is much faster.

I'm trying with this script but it doesn't work at all

<script>
jQuery(document).ready(function() {
var newVideoUrls = [
// Video
'https://player.vimeo.com/progressive_redirect/playback/929651530/rendition/1080p/file.mp4?loc=external&log_user=0&signature=43094fa43b31495020241416581fc9d0e435cbe0ba98802673cf86e9e7cb1211',
// Video
'https://player.vimeo.com/progressive_redirect/playback/843550565/rendition/1080p/file.mp4?loc=external&log_user=0&signature=59c985552b4e60df3819741c8df3f7e76aee3671dd4b88a07473eaeed6bb6542',
// Video 3
'https://player.vimeo.com/progressive_redirect/playback/981872045/rendition/2160p/file.mp4?loc=external&log_user=0&signature=985fc53ee963d4ab1b9770be6984a12b42c4ef8a3987895b1a0f38ebc3d9c690',
// Video 4
// ...
];

jQuery('.thumb-collection .thumbnail-wrap video source').each(function(index) {
if (index < newVideoUrls.length) {
jQuery(this).attr({
'data-src': newVideoUrls[index],
'src': newVideoUrls[index]
});
}
});
});

</script

[arminunruh]

you need to use newpageshown

window.laytheme.on('newpageshown', function(){

})

instead of jquery document ready
https://laytheme.com/documentation/custom-javascript.html#newpage-events

[arminunruh]

the videos aspect ratio is determined by a .ph container that gets a padding bottom css. you might need to adapt this too