Video: Fix blank first frame on iOS

packages/block-library/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fix
+
+-   Video Block: Fix blank first frame on iOS. ([#70298](https://github.com/WordPress/gutenberg/pull/70298))
+
 ## 9.31.0 (2025-09-17)
 
 ## 9.30.0 (2025-09-03)

packages/block-library/package.json

@@ -30,6 +30,7 @@
 		"./accordion/view": "./build-module/accordion/view.js",
 		"./file/view": "./build-module/file/view.js",
 		"./form/view": "./build-module/form/view.js",
+		"./video/view": "./build-module/video/view.js",
 		"./image/view": "./build-module/image/view.js",
 		"./navigation/view": "./build-module/navigation/view.js",
 		"./query/view": "./build-module/query/view.js",

packages/block-library/src/video/index.php

@@ -17,6 +17,8 @@
  * @return string The block content with the dimensions added.
  */
 function render_block_core_video( array $attributes, string $content ): string {
+	wp_enqueue_script_module( '@wordpress/block-library/video/view' );
+
 	// if the content lacks any video tag, abort.
 	if ( ! str_contains( $content, '<video' ) ) {
 		return $content;

packages/block-library/src/video/view.js

@@ -0,0 +1,17 @@
+const videos = document.querySelectorAll( 'video' );
+// `navigator` is a global object in browsers.
+// eslint-disable-next-line no-undef
+const userAgent = navigator.userAgent || '';
+const appleDeviceRegex = /iP\w+/;
+
+if ( appleDeviceRegex.test( userAgent ) ) {
+	videos.forEach( function ( video ) {
+		video.addEventListener(
+			'loadedmetadata',
+			function () {
+				video.load();
+			},
+			{ once: true }
+		);
+	} );
+}