Bookmarklet to download still images from YouTube videos

Quick and dirty code to grab a single frame of a YouTube video. Might work with other video players too.

Table of contents

The bookmarklet

Drag and drop this to the browser's bookmarks bar:

YouTube: Download still image

Usage

1. Open a YouTube video
2. Maximize the browser window and use YouTube's "Theater mode" for a larger result
3. Pause the video at some point
4. Run the bookmarklet; it will download a PNG image

Code

Minified

javascript:(() => { const $video = document.querySelector('video'); const { height, width } = $video.getBoundingClientRect(); const $canvas = document.createElement('canvas'); const ctx = $canvas.getContext('2d'); ctx.canvas.height = height; ctx.canvas.width = width; ctx.drawImage($video, 0, 0, width, height); const $a = document.createElement('a'); $a.download = 'frame.png'; $a.href = $canvas.toDataURL(); $a.click(); })()

Unminified

javascript:(() => {
  const $video = document.querySelector('video');
  const { height, width } = $video.getBoundingClientRect();

  const $canvas = document.createElement('canvas');
  const ctx = $canvas.getContext('2d');
  ctx.canvas.height = height;
  ctx.canvas.width = width;
  ctx.drawImage($video, 0, 0, width, height);

  const $a = document.createElement('a');
  $a.download = 'frame.png';
  $a.href = $canvas.toDataURL();
  $a.click();
})()

Next steps

Your needs may be different from mine, but here's what I usually do:

1. Resize the image using Mac's Preview app
2. Compress the image with TinyPNG
3. Use the image in a blog post

The end result might have poor quality, but that's all right. I use this only for getting still images for video notes.

For an example, check out yesterday's post, Legacy code is code written by other people. Looks good enough for me.

Acknowledgements

I googled for "js video get frame screenshot." The first result was "Capture frames from video with HTML5 and JavaScript" question on Stack Overflow which gave me a good starting point.