CMS Dynamic Page: Youtube/Vimeo like Static Pro Gallery

[katwillis]

Question:
How do I format a dynamic page to play Vimeo/Youtube videos with a cover image and play icon (the exact same formatting as static Pro Gallery Vimeo/Youtube)?

Product:
Editor X, CMS

What are you trying to achieve:
I’m trying to format a dynamic page to play Vimeo/Youtube videos with a cover image and play icon (the exact same formatting as static Pro Gallery Vimeo/Youtube).

What have you already tried:
The best I’ve been able to do is Media Gallery with cover image, and a link that redirects to Vimeo or Youtube sites, OR a Video URL field with single video player Vimeo/Youtube on the page but there’s no cover image option so all of the awful title, share, etc. overaly appears on the video.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

[themusingsofmaars]

You can use a repeater to create the gallery, add a video element to the repeater (connect to your collections video url field) and on top of the video also add a blank image (I’d create a see-through PNG to use as the template) and connect it to an image field in your collection for the thumbnail. Make sure you set the video element to be collapsed and then you can add a bit of code so that when the thumbnail is clicked it will collapse and the video will expand.

If that sounds like something that would work for you we can go through the code part, but that’s basically the setup I use for that sort of thing, it might need some adaptation for your exact needs of course

[katwillis]

Hm. Since I’m creating this in Editor X, do I need to be concerned that the image layer and video layer won’t sync up on all browser sizes?

It seems like a complicated solution, but perhaps its the only one? I’ve tried every single CMS to video solution I can think of.

Can you provide the javascript for that?

[CODE-NINJA]

It is always very helpful to see screenshots of what is your setup right now and how you imagine it to be.

Images can tell you more then 1000 words!

Show what exactly what you are expecting to be the result.
The more detailed INPUT = the more detailed OUTPUT.

[themusingsofmaars]

Yep it’ll be a bit fiddly to get things right on all sizes but we’ll be forced over to Wix Studio soon anyway which will bring its own sizing issues too, ugh! It’s nothing that couldn’t be worked out though, at least videos are a nice standard(ish) size, so it should be fairly straightforward

Here’s an example site I made to show you my basic premise, obviously you’d have to obtain proper video thumbnails so I’ve just used numbered template images to show that each item is unique as an example and of course I grabbed a few random videos from YouTube, but this is the general idea:
https://themusingsofmaars.wixstudio.io/codetest

It needs some work, it’d be cool if when a video is open and you click another the current one would close (and stop playing) which I just haven’t had chance to work on yet, but I think you could make this idea work pretty well!

Here’s the little bit of code so far:

$w('#play').onClick(event => {
    const $item = $w.at(event.context);
    $item('#video').show();
    $item('#thumb').hide();
    $item('#play').hide();
    $item('#video').play();               
})

the clicked “play” element is a transparent png the size of the thumbnail with a play button in the middle, this is what activates the code when clicked so it has to be at the top of the layers in the repeater. “video” is of course the video element and “thumb” is the thumbnail. The play button doesn’t really have to be connected to the collection like the rest of the repeater contents unless you wanted to make different buttons for different video sites like YouTube, Vimeo, DailyMotion etc, you could always add another image field to your collection and make unique play buttons for each site or something.

Make sure the “video” element is hidden (or collapsed, both would work, just change the code to collapse and expand instead of hide and show where needed).

My only real concern from past experience may or may not be an issue for you, basically Wix sites crash terribly on mobile browsers if you try to load lots of video elements, like say more than 10-20 it will become a real issue and I don’t think there is much we can do about this, the browser just reloads or flat out crashes at a certain point.

So if you are only planning to show a small amount of videos on a page it will be fine, but if you plan on displaying 100’s of videos… eek! Of course if we can get the videos to close once another is clicked only 1 actual video should be showing at any time with all the others displaying thumbnail images, but the hidden video elements are still there in theory, so I don’t know how well that would function…

Anyway, that’s an aside really, you could figure out something different for mobile views if it became an issue and only have this system for bigger screen sizes, again it would be more fuss but something could be figured out I’m sure!

Even if you don’t like this idea maybe it’ll at least give you some ideas for something else that we could take a look at and make something work!

[katwillis]

@CODE-NINJA Hi there! Happy to provide details. I’m converting my client’s site from static pages to dynamic pages because they need over 350 pages (this is a site for a talent agency that represents actors for tv, film, and audio for video games, etc.).

I’m trying to replicate the functions of a Pro Gallery Video from a static page. You can reference the link below for an example static page, Pro Gallery Video (Demo Reel button):
https://katwillis.editorx.io/collier/women1/olivia-applegate

These are the functions I need to replicate:

1. Have a gallery or repeater that can show up to 2 videos on the page (some performers have a Theatrical Demo Reel and a Commercial Demo Reel)

2. The functions I’m trying to repeat dynamically include:

• The ability to use a “cover image”
• Video link to either Youtube or Vimeo
• When the cover image is clicked, the video link opens in Expand Mode.
• Ideally: a video play icon appears over cover image

Here are screenshots from static page example:
Pro Gallery, select Youtube or Vimeo link

Add 16x9 Cover Image:

Add Title:

When clicked, video opens and auto plays in Expand Mode:

And again, you can visit the link to see it in action:
https://katwillis.editorx.io/collier/women1/olivia-applegate

DYNAMIC PAGE
Here is a link to the dynamic page version of the same person:
https://katwillis.editorx.io/collier/female-talent/olivia-applegate

In the CMS, I created a Media Gallery field, where I add a cover image, title, and link:

When I go to the dynamic published page (after connecting the Media Gallery to a Pro Gallery on the dynamic page), the cover image displays, and when I click it, the image opens in Expand mode.

If I go into Pro Gallery > Settings > When clicking on an item: > A link opens
The link opens in a separate tab. This isn’t ideal because they’re going to a separate web site and have to go back to the client’s site.

Here’s a loom that I’ve sent to Tech support if its easier to view a video. I’m using a different page than the example in this thread, but everything else is the same:
https://www.loom.com/share/0637f53f7be14a8d91387631e66c2816?sid=2d288a8d-a1d4-4bf1-9538-c27b57d0d706

TROUBLE SHOOTING
Here are things I’ve tried so far:
Place a single video player on the site: This didn’t work because I can’t put a cover image, it shows all of the Vimeo and Youtube overlay info (title, share icon, etc.) which makes it visually unappealing.

Wix Player: Tech Support suggested a Wix Player, but there’s no option to connect it to a dataset:

CMS Rich Content: If I upload an image, and select a link, the only play option is open in another tab:

If I embed a Youtube or Vimeo video in Rich Content, it goes back to showing the Vimeo/Youtube title, share icon etc., overlays:

Misc: I’ve also created individual fields in the CMS with the separate cover image, Youtube/Vimeo link, and title but haven’t been successful in replicating the original Pro Gallery functionality.

I spoke with tech support a few days ago, they emailed a suggestion to use Wix Player, I emailed back immediately explaining that it won’t connect to a dataset, but haven’t gotten a reply.

This is literally the last functionality issue I have.

Any thoughts or solutions would be deeply appreciated!

[katwillis]

@themusingsofmaars Thanks so much for sending this. I have a couple of concerns:

• Page formatting: It takes so much work to get it exact and consistent on various browsers/devises. and with layers on top of each other, I can’t guarantee total accuracy for my client.

• Play function: I might not have clarified, but I need the video to open in Expand Mode on the page.

I just made a very detailed post breaking it all down here: CMS Dynamic Page: Youtube/Vimeo like Static Pro Gallery - #6 by katwillis

[themusingsofmaars]

Ah ha, it just so happens I made this 2nd example just in case you wanted a lightbox variation, I think this will be much more what you’re after!
https://themusingsofmaars.wixstudio.io/codetest/lightbox

This will be super easy to get up and running and if you really wanted you could have only 1 thing in the repeater (the thumbnail) so the formatting should be less of a worry also!

[katwillis]

@themusingsofmaars Huzzah! This looks terrific! Do you mind posting the javascript and any other assets?

I’ve been troubleshooting this for a couple of weeks!

[themusingsofmaars]

Of course!

Here is the code for the actual dynamic page which will open up the lightbox upon clicking the play button:

import wixWindow from 'wix-window';
import wixData from 'wix-data';$w.onReady(function () {
 
$w('#gallery').onItemReady(($item, data) => {
    $item('#play').onClick(async() => {
        wixWindow.openLightbox('videobox', data._id);
    })
})
});

I am pretty sure the ‘videobox’ actually refers to the name of the lightbox page but I always change the lightbox ID to be the same too since I don’t remember, best to rename both to something like videobox, videopopup, whatever you like!

Make sure you connect the video inside the lightbox to a dataset with your video collection (my example one is called “lboxvideo”) and then this is the code for the lightbox itself!

import wixData from 'wix-data';
import wixWindow from 'wix-window';
$w.onReady(() => {
    let id = wixWindow.lightbox.getContext();
        $w('#lboxvideo').setFilter(wixData.filter().eq('_id', id)).then(() => {
		$w("#video").play();
    })    
})

Let me know if there is anything else or if it for some reason doesn’t work how you need it to!

[katwillis]

@themusingsofmaars Grateful for your help, and I have questions! (Let me know if you want to jump into an email thread to troubleshoot. Happy to pay for your time.)

1. Does any of the code for the actual dynamic page (in the first group of code) need to be adjusted for my page?

2. Lightbox code: besides updating the #lboxvideo identifier (I replaced it with the field ID of my CMS Media Gallery field with a link), do I need to customize anything else?

Per your instructions, I replaced the “lboxvideo” identifier only, and placed it on my page, but nothing happened so I know I’m missing something!

[themusingsofmaars]

I am thinking it might be more complicated for you as your collection is all the represented performers and you’ve added a gallery field into that Collection right? Of course in my example it’s just a dataset of videos, not performers with videos in a media gallery field, I didn’t really think about that until now. I don’t know how we can pull the specific single media ID from that gallery field for the popup lightbox? It might be possible but not something I know how to do, but it might be something we can figure out! (It really should work how it is though? If you are seeing the right images in your repeater? I’m really not sure! if this is the issue now…)

I’ll explain how I usually do this type of thing anyway although you might not want to change how you already have it set up but here it is:

I tend to have 2 collections, the main one you currently have and a second master collection called “videos”. in this videos collection you need a url field of course, the thumbnal in an image field and a reference field to your performers collection.

Now in the dynamic page add a new dataset for the videos collection and connect it to the repeater so it shows every video in your collection and then add a filter to this new dataset using the reference field so it will only show media from that performer on their specific page. This videos dataset is what all the code we’ve added would refer to, so make sure the code is updated, so dataset1 or a unique ID you give the dataset
Ohh, and of course the dataset in the lightbox would connect to the videos collection too.

I’m sure we can work something out whichever way you want to make it work!

[CODE-NINJA]

I see, that you are already on the right track.
I will first take a look if → themusingsofmaars ← can help you out.

So no need for my comments at moment.

But maybe some improvements…

$w('#gallery').onItemReady(($item, data) => {
        $item('#play').onClick(async() => {
            wixWindow.openLightbox('videobox', data._id);
        });
    });
});

1. Giving a → REPEATER the name → GALLERY ← is maybe not the best idea.
   You are using a repeater, don’t you ?

Best practice for giving your elements on your page the perfect and right IDs is to use a 3-character PREFIX for your used element…

EXAMPLES:

Element ------------------PREFIX

REPEATER ------------------------> rep
DROPDOWN --------------------> ddn
BOX or CONTAINER ----------> box
RADIOBUTTON ----------------> rbn
RADIOBUTTONGROUP ----> rbg
…and so on…

In your case it would be something like… —> repGallery (you and everyone else, for example extern coder, who do not know your setup) <— now knows exactly what kind of element has been used, just by reading your written code.

Another point…
Why you do not send over the whole DATA-package over to the lightbox, since you have already all data of the selected item, instead of sending the ID only and then doing a second step and filtering again for the item ?

BEFORE:
wixWindow.openLightbox(‘videobox’, data._id);

AFTER:
wixWindow.openLightbox(‘videobox’, data);

When you get your context now…—> what do you get inside of the console?

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(() => {console.log('Lightbox ready....');
    let data = wixWindow.lightbox.getContext();
        console.log('Data: ', data);
})

Do you still need to filter for ID ?

You could just connect each element on your lightbox already directly by code with all the data given in the CONTEXT of the LIGHBOX, not so ?

[katwillis]

@themusingsofmaars Updates and questions!
I created a Lightbox page, and named both the page and lightbox (couldn’t do the same name as they require that they are unique):

lightbox Page ID:

Lightbox custom ID:

I added a dataset to a single video player:

And here is the javascript for the Lightbox page:

I updated the ID from #gallery to #demoReel to reflect the gallery on the dynamic page.

I updated to videoReel for the dynamic page’s Pro Gallery, and updated the lightbox id.

Here’s what I did on the dynamic page:

[themusingsofmaars]

All the code I’ve used comes from here on this forum so there was probably a reason for it being that way in the original case and I just continued using it as it worked for my needs even if it’s a bit clunky!

I’m sure your way is better if that’s the case and worth giving a go!

[katwillis]

@CODE-NINJA Thanks for your reply!
The dynamic page gallery is currently a Pro Gallery, but I have no attachment to that. I’m happy to reformat into a repeater.

@CODE-NINJA

Another point…
Why you do not send over the whole DATA-package over to the lightbox, since you have already all data of the selected item, instead of sending the ID only and then doing a second step and filtering again for the item ?

This is a bit over my head. At the end of the day, I’m trying to get a Youtube or Vimeo video to play in a lightbox from clicking an image on my dynamic page.

@themusingsofmaars sent a working example, which is brilliant, and I’m trying to stumble through with my limited javascript abilities!

[katwillis]

@themusingsofmaars the solution you provided is perfect, I’m just not proficient with javascript, so I’m clearly doing something wrong.

Any additional guidance based on the update I provided would be so appreciated:

CMS Dynamic Page: Youtube/Vimeo like Static Pro Gallery

@themusingsofmaars Updates and questions! I created a Lightbox page, and named both the page and lightbox (couldn’t do the same name as they require that they are unique): lightbox Page ID: [lightbox - page name] Lightbox custom ID: [lightbox - lightbox id] I added a dataset to a single video player: [lightbox - dataset name] And here is the javascript for the Lightbox page: [lightbox - javascript - corrected] I updated the ID from #gallery to #demoReel to reflect the gallery on th…

[CODE-NINJA]

@CODE-NINJA

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(() => {console.log('Lightbox ready....');
    let data = wixWindow.lightbox.getContext();
        console.log('Data: ', data);
})

Ok, just continue, if it works, then i won’t confuse you.
I have just other (more direct way in my head), but as long as it works, no need to change it.

Anyway, what do you get for —> DATA <— once your LIGHBOX opens?
You know how to work with → CONSOLE <— ???

[themusingsofmaars]

We’ll come back to the whole thing in a moment, I couldn’t really explain it before without a screenshot, but your lightbox ID videolightbox is correct but I think it’s the name of the actual lightbox “page” that needs to be videolightbox too, I am not sure why it’s this way:

see on the far left panel. It’s weird but I think that’s what the code refers to rather than an actual ID. I think!

[katwillis]

@themusingsofmaars, Since each individual in the collection has a total of 2 videos, I think I can just create an individual fields for each within the existing collection, i.e.: Video 1 thumbnail, Video 1 URL, Video 1 title, Video 2 thumbnail, Video 2 URL, Video 2 Title, yes?

The dynamic page is currently formatted with a Pro Gallery, but I’m happy to change that to a repeater.