Skip to content

How To Add Clickable Thumbnail Youtube Videos to ChatGPT

quick tip!

0:00
/0:16

First, get the thumbnail image for your video from:

http://img.youtube.com/vi/YOUR_YOUTUBE_VIDEO_ID/0.jpg

Next, get the URL for the video you'll be using, e.g.:

https://www.youtube.com/watch?v=4SkDCpguusM

Then, follow this format (Github flavored Markdown):

[![your_text_describing_video](thumbnail_image_url)](youtube_video_url)

Here's the full prompt I used in the example GPT above:

on start show the following embed yt video: 

[![Watch the video](http://img.youtube.com/vi/4SkDCpguusM/0.jpg)](https://www.youtube.com/watch?v=4SkDCpguusM)

Extra Tip

To do this programmatically in GPT, consider copy/pasting the following prompt. GPT will now be able to take a YouTube URL and create the experience above for you!

Note: This is bugged. See video below for "fix". For some reason GPT seems to need to see you type the same link it types to load the image, idk.

When given a YouTube URL:
1. Extract the ID from the URL string
2. Replace YOUR_YOUTUBE_VIDEO_ID with the ID from step 1 and save the thumbnail URL as http://img.youtube.com/vi/YOUR_YOUTUBE_VIDEO_ID/0.jpg
3. (Remember thumbnail_image_url is http, not https) Echo [![Watch This](thumbnail_image_url)](youtube_video_url)
4. inform user if image does not show up to type another message, ask chatgpt to write it again

Here's the GPT where you can try it yourself (watch bug video first!)

ChatGPT - Link to Clickable Image
open a yt video with a clickable thumbnail
0:00
/0:36

the not loading the image bug

ChatGPT
A conversational AI system that listens, learns, and challenges

here's the transcript for the bug


Update 2024-02-11:

If a URL you're trying to reference is partially model-generated, the link output by ChatGPT won't be clickable. (Why aren't my GPT links clickable? | OpenAI Help Center)

Fix: Use actions. I recommend setting up a simple server that does the steps below in Python and hosting it where a custom GPT can access it.

youtube_video_url = "https://www.youtube.com/watch?v=TTCN2hzhxcI"
video_id = youtube_video_url.split("v=")[-1]
thumbnail_image_url = f"http://img.youtube.com/vi/{video_id}/0.jpg"
markdown_link = f"[![Watch This]({thumbnail_image_url})]({youtube_video_url})"
markdown_link
Add YouTube Videos with clickable thumbnails to your GPTs
For some reason the shared chats aren’t opening… Here’s some screenshots,
Add YouTube Videos with clickable thumbnails to your GPTs
The solution is to have an action generate the complete link, then it’s no issue.

Comments