CMS YouTube Thumbnail Links with Pro Gallery

Ask the community
, , ,
1

I’m having trouble with
Writing velo code to read data from a CMS and manipulate the data and add it to the same row but different column.

Working in
Wix Editor, CMS, Dev Mode

What I’m trying to do
I am using a CMS connected to a pro gallery. I have used this before to display photos. What I would like to do is have the CMS drive the gallery but it’s youtube links. There will be a link for the item, and each video will have a thumbnail so users can view it on the page. The thumbnail is not a image on the site it’s the url for youtube thumbnail.

I would like users to be able to upload a link to the cms database and run an automation to extract the video ID from the link and then generate the thumbnail link. Added placehold “videoidhere”

image
image834×206 4.81 KB

What I’ve tried so far
I’ve tried googling and finding youtube videos. Some are close but I don’t know quite how to read and then write back to CMS. I have the whole setup working manually, I just want the velo code to rewrite/edit CMS, the webpage design is working.

2

Hi, @WPAG_Website !!

After reading your question, I realized that when users upload a YouTube video link, it might be better to save the thumbnail image URL of that link at the same time. Wouldn’t that work just as well? :raising_hands:

I think we can extract the thumbnail image URL with code like this, so it should work just fine to save it together with the video URL in the collection! :innocent:

function extractVideoId(url) {

  if (!url.startsWith("https://www.youtube.com/") && !url.startsWith("https://youtu.be/")) {
    return null;
  }

  let videoId = null;

  if (url.includes("v=")) {
    videoId = url.split("v=")[1].substring(0, 11);
  } else if (url.includes("youtu.be/")) {
    videoId = url.split("youtu.be/")[1].substring(0, 11);
  }

  return videoId;
}

function getThumbnailUrl(videoId) {
  return `https://img.youtube.com/vi/${videoId}/0.jpg`;
}

const url = "https://www.youtube.com/watch?v=qx0NX-iLGiM&list=RDqx0NX-iLGiM&start_radio=1";
const videoId = extractVideoId(url);
const thumbnailUrl = videoId ? getThumbnailUrl(videoId) : null;

console.log(videoId); // qx0NX-iLGiM
console.log(thumbnailUrl); // https://img.youtube.com/vi/qx0NX-iLGiM/0.jpg