HTML5 videos do not play when embedded inside of a scrollable iFrame with Safari on iOS

Question

With Safari on iOS, videos that are embedded below the fold inside of a scrollable iFrame will not begin playing when tapped. If you tap on the video multiple times, or do a long tap, the video may or may not begin playing. On the contrary, the video will play without issue as long as the video is embedded above the fold.

• Here is an example showing a video not working when embedded below the fold inside of an iframe: https://d1wlensemu2d8.cloudfront.net/safari-bug/example.html
• Here is an example showing a video working when embedded above the fold inside of an iframe: https://d1wlensemu2d8.cloudfront.net/safari-bug/example2.html
• Here are the contents of the iframe from the first example. The video plays fine when the content is accessed directly: https://d1wlensemu2d8.cloudfront.net/safari-bug/iframe.html

Until the bug is resolved, one possible work-around may be to extend the height of the iFrame and make its container scrollable. However, this is less than ideal when the content is variably sized and/or contains links to other similarly hosted pages. Can anyone recommend a better solution?

This was tested on iOS 15.4 with an iPhone 12 and iPad Pro (9.7-inch).

Answer 1

Here is a reasonable work-around for the time being:

window.addEventListener('touchstart', function(e) {
  e.preventDefault();
});