
Fixing HTML video autoplay, blank poster, first frame, and improving performance in Safari and iOS devices
Fix HTML video autoplay issues in Safari & iOS, including blank poster and first frame problems, and improve loading performance with some tips.
Autoplaying videos on Safari and iOS devices can be tricky due to specific browser policies and behaviors. By default, Safari on iOS devices (including iPhones) plays video content in full-screen mode when the play button is activated. This is a security feature to prevent malicious websites from playing video content without the user’s consent.
Additionally, the blank white box you’re seeing before playing the video is due to the fact that Safari doesn’t display the video poster image or the first frame of the video by default. This is a known issue with Safari on iOS devices.

Fixing autoplay for Safari on iOS
Autoplaying video in Safari and iOS can be a bit tricky due to Safari’s strict autoplay policies. By default, Safari and iOS devices do not allow autoplaying of video content with sound. This is a security feature to prevent unwanted audio from playing without the user’s consent. However, you can still autoplay video content with no sound.
To enable autoplay on your video, you need to include specific attributes in your <video>
tag:
autoplay
: theautoplay
attribute allows the video to start playing automatically.muted
: videos must be muted (the attributemuted
) to autoplay on most mobile browsers, including Safari.playsinline
: theplaysinline
attribute is crucial for iOS devices, as it allows the video to play inline within the element, rather than going full-screen.
<video autoplay muted playsinline>
<source src="example-video.mp4" type="video/mp4">
</video>
The first frame is not seen as the poster on iOS Safari
iOS Safari does not display the first frame of a video element by default. You need to explicitly specify a poster image using the poster
attribute on the <video>
tag. If you don’t specify a poster image, the video will display a blank or black screen until the user interacts with it.
This behavior is specific to iOS Safari and may not be the same on other browsers or devices.
<video poster="image.jpg">
<source src="example-video.mp4" type="video/mp4">
</video>
How to get HTML5 video thumbnail without using poster on Safari or iOS
By simply adding #t=0.001
at the end of the video file URL, we signal the browser to skip the first millisecond of video. When you do this, even iOS Safari will preload and display the specified frame to the user.
<video>
<source src="example-video.mp4#t=0.001" type="video/mp4">
</video>
Improving performance
To enhance video performance on Safari and iOS devices, consider the following best practices:
- Use
preload
attribute: the attributepreload
is designed to provide hints to the browser about how to handle video loading when the page is initially loaded. It has three possible values:auto
: the browser is instructed to load the entire video when the page loads. This can lead to increased bandwidth usage, as it may download videos that the user might not play.metadata
: only the metadata (such as dimensions and duration) of the video is loaded. This option is often recommended as it provides enough information for the user interface without consuming too much bandwidth.none
: no video data is loaded until the user initiates playback. This is the most efficient in terms of initial load time and bandwidth but may result in a delay when the user decides to play the video.
- Optimize video files: use compressed video formats like MP4 with H.264 encoding to reduce file size without sacrificing quality.
- Use a CDN: serving your video through a Content Delivery Network (CDN) can significantly improve loading times and reduce buffering.
Enable compression: if you’re using a web server like Apache or Nginx, enable output compression to reduce the amount of data transmitted. Example for the Apache:
Enabling DEFLATE compression for MP4, WebM, and OGG video files. <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE video/mp4 AddOutputFilterByType DEFLATE video/webm AddOutputFilterByType DEFLATE video/ogg </IfModule>
When possible, use Brotli compression instead of gzip.
Enabling BROTLI compression for MP4, WebM, and OGG video files. <IfModule mod_deflate.c> AddOutputFilterByType BROTLI video/mp4 AddOutputFilterByType BROTLI video/webm AddOutputFilterByType BROTLI video/ogg </IfModule>
- Lazy loading video: improve lazy loading of media by not fetching the resource when it’s in the viewport for at least 1 second. Automatically pause playing media when not visible.
Leverage browser caching: caching can significantly enhance performance by minimizing the need to repeatedly fetch videos from the original source, thereby conserving bandwidth and improving user experience. Example of setting cache in Apache:
Enabling cache for MP4, WebM, and OGG video files for Apache using header Cache-Control <IfModule mod_headers.c> <FilesMatch "\.(mp4|webm|ogg)$"> Header set Cache-Control "max-age=31536000, public" </FilesMatch> </IfModule>
Enabling cache for MP4, WebM, and OGG video files for Apache using header Expires <IfModule mod_expires.c> ExpiresActive On ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/webm "access plus 1 year" ExpiresByType video/ogg "access plus 1 year" </IfModule>
Video examples
Here are the video examples so you can test how it works on your device.
Comments