Custom Video Lightbox

Ask the community
,
1

Hello,
I need to create a gallery of videos that behave similarly to the videos you see here: www brightstory .tv/portfolio
- The videos are arranged in a grid
- The video thumbnail goes dark and displays the name of the video on hover
- The video plays on Lightbox when clicked.
- It works on desktop and mobile.
I know that I can painstakingly create lightboxes for each video individually and maybe create a hover box for each thumbnail to replicate this effect. But I wonder if there is a faster way to automate the process with several videos?
I have reached out to Wix customer support and the two representatives I talked to confirmed this cannot be accomplished with wix but could maybe be done with custom code. Also, the representative said that their lightboxes do not work on mobile so I need a solution which also works on phones.
Thank you!

2

https://russian-dima.wixsite.com/meinewebsite/repeater-video

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query("Corvid-Video-Tutorials").find()
    .then((res)=>{
        $w('#myRepeater').data=res.items
    })
 
    $w("#myRepeater").onItemReady( ($item, itemData, index) => {
        $item("#TITLE").text = itemData.title;

        $item("#CONTAINER").onMouseIn ((event) => {
            $item("#TITLE").show('float')
            $item('#BOX').style.backgroundColor = "rgb(155,155,155)";
        });

        $item("#CONTAINER").onMouseOut ((event) => {
            $item("#TITLE").hide('float')
            $item('#BOX').style.backgroundColor = "rgb(255,255,255)";
        });
    });
});