Code not working for interactive video display/cms collection

[_Watts]

1. I have a page built in Wix Studio Editor with a CMS collection containing 4 entries.
2. On this page, I have:
   A video player that should display a video URL from the CMS collection.
   A description box (text element) that should display a description from the CMS collection.
   A repeater that displays 4 sections (corresponding to the 4 entries in your CMS collection).
3. Inside each repeater section, there are two buttons:
   When either button in a repeater section is clicked, it should update:
   The video player with the appropriate video URL from that particular CMS entry.
   The description box with the corresponding description from that same CMS entry.

I want it to:

When a button is clicked (inside any repeater section), the video player should play the video associated with that repeater item, and the description box should update with the appropriate description for that video.

The updates are specific to the content (video and description) of the clicked repeater section.

I’ve tried using flexiboxes, pro galleries, containers inside cells, and now I’ve using a cell divided format to hold each of these elements. What’s wrong with my current code? Maybe field keys? Or would it have something to do with the current CMS connections I have in place (I’m certain are correct). ( Also I input my correct item names).

$w.onReady(function () {
// Make sure the repeater is connected and ready
$w(“#yourRepeaterID”).onItemReady(($item, itemData, index) => {
// Handle the first button click
$item(“#button1ID”).onClick(() => {
// Update the video player source and description dynamically
$w(“#videoPlayerID”).src = itemData.videoField; // Link to the correct video URL field
$w(“#descriptionBoxID”).text = itemData.descriptionField; // Link to the correct description field
});

    // Handle the second button click
    $item("#button2ID").onClick(() => {
        // Update the video player source and description dynamically
        $w("#videoPlayerID").src = itemData.videoField; // Link to the correct video URL field
        $w("#descriptionBoxID").text = itemData.descriptionField; // Link to the correct description field
    });
});

});

[Dan_Suhr]

Make sure the field keys (itemData.videoField, itemData.descriptionField) match exactly with your CMS collection field keys. You can check these in the content manager and ensure you use the correct field key names in your code.

also maybe use .videoUrl for the video player instead of .src :

also check (“#yourRepeaterID”) is the correct name

[codequeen]

Is the code pointing to your description box? Or the text element inside the description box?

Do you have a screenshot of the code that you can share? Are there any underlined red words in the code panel?

[_Watts]

Hi, thank you. I’ve updated all of this and still no luck. Is wix studio not really designed for video automation? Because this seems much harder than it should

[Mark_Hunte]

I am not sure I fully understand your setup.

But a simple example:

Code:

$w.onReady(function () {
 
$w("#repeater1").onItemReady(($item, itemData, index) => {
	
  console.log(itemData)
// // Handle the first button click
 $item("#button1").label = itemData.videoLabel

  $item("#button1").onClick(() => {       
$w("#videoPlayer2").src = itemData.videoUrl; // Link to the correct video URL field
$w("#descriptionBox").text = itemData.description; // Link to the correct description field
});

});
});

Make sure your element IDs match the code ones for the Repeater, button, Text and Video player.

I.e in my version the repeater’s id is #repeater1

Your ids may be different.

CMS :

Video URL.
Field Id : videoUrl
Type: URL

–

Description.
Field Id : description
Type: Text

–

VideoLabel.
Field Id : videoLabel
Type: Text

–

The repeater is connected to the CMS directly but no items are connected directly.

–

When run

---

Hope that helps.