Youtube Video Preview Screen Generator

Currently, to embed a video such as youtube video on a webpage, you need to include the iframe into the html. This is a problem in markdown parsers as iframes are not allowed.

Stack Overflow has a nice solution around it. Instead of inserting the iframe, insert a video preview image to indicate to user it is a video. The image will however be a link to the youtube site instead of embedded in the page. It is a nice hack.

However, to make the preview image look like a video, you need to capture a screen shot of the video. There should be an easier alternative. After not having much luck finding such tool, I decide to make one.


cv2, PIL, numpy

Usage <image> [image-out-width=720]
 -OR- <video> <frame #> [image-out-width=720]
Eg. path/to/video.mp4 1

or for generic (non-youtube) play triangle icon: <image> [image-out-width=720]
 -OR- <video> <frame #> [image-out-width=720]
Eg. path/to/video.mp4 1

This will generate a video preview image and also print out the markdown linking syntax.

Generic (non-youtube) video preview

Youtube video preview

I bet you wanted to click that, didn’t you? ;-)

All video previews in my github READMEs are generated using this tool.

You can find the source code here.

Watch the repo if you like to stay up to date on it. I have one other useful video util in mind to add soon.