Video link in the comments to display as embed video when published

[Giovanni]

Hello Gliders,

is there a way to let the users past a video link in the comment and display it as an embed video after it’s published?

[Robert_Petitto]

Edit:

No, it’s not possible because you can’t include <iframe> html in a chat message.

Original response

It’s not perfect, and might cause more issues than it’s worth, but if just youtube, possibly. You’d need to account for whether it’s youtu.be/VIDEOID or youtube.com/watch?v=VIDEOID, but as long as you can isolate the ID, then you can create youtube embed HTML using a template column.

This bit of javascript can pick out a YouTube id

function getYouTubeVideoID(url) {
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\s*[^\/\n\s]+\/|(?:v|e(?:mbed)?)\/|\S+?[\?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;

    const match = url.match(regex);
    if (match) {
        return match[1];
    } else {
        return;
    }
}

// Example usage:
return getYouTubeVideoID(p1)

In an ifThenElse column, you’ll want to check if the javascript above outputs a valid ID. If so, output the html, else output the message.

[Giovanni]

Thank you for the reply Robert! I’m going to keep the links in the comments…

p.s. I’m loving your tutorials! I’ve been learned a lot from your expertise!

[Robert_Petitto]

Thanks for the kind words! Let me know if there’s a topic that needs further explaining!

[Himaladin]

Are you interested in replacing the URL with a thumbnail from YouTube? By adding a YouTube Thumbnail column and a bit of HTML markup, you can create a play button that resembles a YouTube thumbnail. At least your users will get more information through the thumbnail.
Of course, this will open a new window, just like clicking on the URL.

[Giovanni]

Yes Himaladin! This could be a smart solution. But are you sure that the thumbnail will be displayed? The type of data displayed for the content is a “text” type. How do you suggest me to structure the new column for the Youtube Thumbnail to try if it works?

[Jeff_Hager]

If I recall correctly, you can inject html into the comments that are displayed, so it would be a matter structuring a template column that joins the comment with HTML that contains the image and link, and then display that template column in your comments. I believe the comments component will render HTML content.

[Robert_Petitto]

Ah. That’s a smart solution and very doable with html.

[Robert_Petitto]

Here’s how!

The javascript column is listed above