Video: Fix blank first frame on iOS
Closes: #51995
What?
Fixes blank first frame issue in video blocks on iOS Safari by adding video.load() call in Script Module.
Why?
iOS Safari has a rendering timing issue where video elements show a blank/black frame before displaying the actual first frame of the video.
How?
- Adds a new Script Module (
video/view.js) that targets iOS devices specifically - Calls
video.load()method to force the browser to reload and properly render the first frame - Implements safeguards to prevent multiple executions on the same video element
Testing Instructions
- Open iOS Simulator or use an actual iOS device
- Create a new post or page in WordPress
- Insert a Video block
- Upload or select a video file
- Publish/preview the page
- Navigate to the published page on iOS Safari
- Observe that the video displays the first frame immediately without showing a blank/black frame
Screencast
Before
https://github.com/user-attachments/assets/1575c810-ac3d-46b0-8577-fddeb0a390df
After
https://github.com/user-attachments/assets/c28fdce3-aa07-4a1e-b6b8-e93866f78443
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
Unlinked Accounts
The following contributors have not linked their GitHub and WordPress.org accounts: @porg.
Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Unlinked contributors: porg.
Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: fluiddot <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.