chatgpt

How To Add Clickable Thumbnail Youtube Videos to ChatGPT

quick tip!

Bram Adams

Feb 10, 2024 — 3 min read

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!)

0:00

/0:36

the not loading the image 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