Browser: Chrome 128 OS: macOS Bricks version: v1.11 Related post: link
Hi,
I want to build a video player section. All the videos are youtube videos, but I store the main details in a custom post type too (video ID, title, description, thumbnail). I’ll have a video bricks element on the left, and a list of other videos on the right, displayed with the stored main details. The videos on the right are a result of a query loop, looping through the custom post type.
Now, when clicking on one of the little videos on the right side, I want to replace the loaded in video (on the left) with the one being clicked on. Until now, I was able to achieve this by creating a custom JS function, that I call with a click interaction set on each little video. This function replaces the ID in the src attribute of the iframe of the main video. Everything worked fine, until…
After I was able to achieve what I wanted, I changed the main video to be part of a query loop as well, querying the latest post of my custom video post type. As soon as I did that, the interaction on the little videos stopped working altogether. There is no console error, and I know for a fact, that the function is there in the source code, but it doesn’t get called.
As soon as I move the video element out of the element with the query loop, my function is working again.
I created a demo page in a clean install. There are two sections of the same content, only the bricks IDs are changed in the interactions, and in the first section, the “featured video” has a static ID, in the second one it gets it from the query loop. In the first section, my interaction is working (console log is triggered as well), while in the second section, the JS function doesn’t even get called.
function updateYouTubeVideo(target, id) {
console.log('clicked');
const targetElement = document.getElementById(target);
if (!targetElement) {
console.error("Target element not found");
return;
}
const iframe = targetElement.querySelector("iframe");
if (!iframe) {
console.error("No iframe found in the target element");
return;
}
const src = iframe.src;
// Use a regular expression to replace the video ID while preserving parameters
const updatedSrc = src.replace(/(youtube\.com\/embed\/|youtu\.be\/)([a-zA-Z0-9_-]+)(\?.*)?/, `$1${id}$3`);
// Update the iframe's src with the new video ID
iframe.src = updatedSrc;
}
I recreated your setup – as I understood it – on a local installation and created a small screencast: Video uploaded to CleanShot Cloud. Let me know if this helps.
Thank you so much for the detailed video. I made it work, it seems that the “bug” was caused by me selecting a target in the interaction. I also simplified the custom JS function.
What I haven’t noticed before, is the “turning IDs into classes” thing. How does that work? I see, that on some of my sites, it keeps the IDs, on some it turns them into classes. Maybe I just overlooked, but didn’t find any settings or articles about it, other than the built in converter.
