Today I learned a one-line fix for the video that shows up as a black rectangle on an iPhone: append a media fragment #t=0.5 to its URL. Safari will use that frame as the thumbnail.

<video src="clip.mp4#t=0.5" controls playsinline preload="metadata"></video>

Rules of thumb:

• The fragment goes after the query string (clip.mp4?cache=1#t=0.5), and never append a second fragment to a URL that already has one.

  const THUMBNAIL_TIME = 0.5
  
  function withThumbnail(src) {
  return src.includes('#') ? src : `${src}#t=${THUMBNAIL_TIME}`
  }

• Keep the offset small (0.5, not 5).

• Pick a frame that isn’t black: a clip that fades in from black at t=0 looks like a broken player.