Cover block with video not playing automatically in iOS

[renatho]

Impacted plugin

Jetpack, VideoPress

Quick summary

In this ticket (8579784-zd-a8c), a user reports that their cover blocks with videos are not playing in iOS.

I could see the issue in their site, and I could also reproduce it one time in a test site in wordpress.com, but when I moved it to atomic the issue stopped (the cover I added started playing automatically as expected). I tried to reproduce more times, but I wasn't able to because for some reason I started having some issues with the cover block in new test sites (not being able to apply the video, or the editor breaking).

Steps to reproduce

You need an iPhone or an iPhone simulator to test it. I used the iPhone simulator from the Xcode to reproduce it.

1. Open the Safari in your iOS.
2. Navigate to the site https://digitalreplica3d.com/
3. See that the cover is static.

Screen.Recording.2024-08-29.at.18.28.25.mp4

A clear and concise description of what you expected to happen.

The video of the cover should play automatically.

What actually happened

The video is static.

Impact

Some (< 50%)

Available workarounds?

No and the platform is unusable

If the above answer is "Yes...", outline the workaround.

I started writing the following snippet to fix the issue that worked when running from the console (debugging through Safari), but after that I noticed that the user has a Premium plan, where we can't inject scripts. So it wasn't possible to test it.

And in my test, when I migrated my site to atomic the issue didn't happen anymore.

const videosWorkaround = ( originalElement ) => {
  let newElementHtml = originalElement.outerHTML;
  newElementHtml = newElementHtml.replace(
    /^<(\w+)/,
    `<$1 playsinline autoplay`
  );

  originalElement.insertAdjacentHTML('beforebegin', newElementHtml);

  const nextElement = originalElement.nextElementSibling;
  if (nextElement && nextElement.classList.contains('vjs-poster')) {
    nextElement.remove();
  }

  originalElement.remove();
}

document.querySelectorAll( '.vjs-tech' ).forEach( videosWorkaround );

Platform (Simple and/or Atomic)

Simple

Logs or notes

• Tested in Safari using a simulator with iPhone 15 Pro Max.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8579784-zen

[dsas]

Closing in favour of Automattic/wp-calypso#92856