# Hack for iOS Safari to display the HTML video thumbnail

DevFeed: [Hack for iOS Safari to display the HTML video thumbnail](<https://devfeed.tech/articles/hack-for-ios-safari-to-display-the-html-video-thumbnail-37277.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/>)

Author: Stanko

Published: 2020-05-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [iOS](<https://devfeed.tech/topics/ios.md>), [HTML](<https://devfeed.tech/topics/html.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [browser-support](<https://devfeed.tech/tags/browser-support.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [edge](<https://devfeed.tech/tags/edge.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [ios](<https://devfeed.tech/tags/ios.md>), [safari](<https://devfeed.tech/tags/safari.md>), [video](<https://devfeed.tech/tags/video.md>)

## AI overview

A tutorial explains how adding the Media Fragment #t=0.001 to a video URL can make iOS Safari preload and display a video frame as its thumbnail before playback. The technique is also reported to work in several desktop browsers and on iOS and Android phones.

## Source excerpt

Mobile iOS Safari doesn't display preview thumbnail until you tap on the video. My go-to solution was to define a poster attribute and move on. But today I learned I could use something called Media Fragments. Media Fragments specify a way of sharing parts of audio and video files by simply adding url params. Browser support varies, but fortunately support for what we need is pretty good. Code # By simply adding #t=0.001 at the end of the video file url, we are telling the browser to skip the first millisecond of the video. When you do this, even iOS Safari will preload and show that specific frame to the user. So the code looks like this: <video> <source src="path-to-video.mp4#t=0.001" type="video/mp4" /> </video> Example # Please note that you need to check the example using iOS Safari to see the difference. Without media fragmentsWith media fragments It is a hacky solution, but I've tested it on desktop Firefox, Safari, Chrome, IE11 and Edge, as well as on iOS and Android phones and it works in all of those.