gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Video: Fix blank first frame on iOS

Open Infinite-Null opened this issue 7 months ago • 1 comments

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

  1. Open iOS Simulator or use an actual iOS device
  2. Create a new post or page in WordPress
  3. Insert a Video block
  4. Upload or select a video file
  5. Publish/preview the page
  6. Navigate to the published page on iOS Safari
  7. 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

Infinite-Null avatar Jun 03 '25 11:06 Infinite-Null

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.

github-actions[bot] avatar Jun 04 '25 08:06 github-actions[bot]