target="_blank" links to MP4 files buggy in iOS Safari

Question

Below is a boiled-down version of the problem I'm having.

I have a web page with a list of links to different kinds of files hosted remotely (S3). It looks something like this. I want the links to open in a different tab, so I'm using target="_blank". If the browser's default behavior is to download the file, that's fine too.

<a target="_blank" href="https://my-hosted-files.com/materials.pptx">
  Link to powerpoint
</a>
<a target="_blank" href="https://my-hosted-files.com/intro.mp4">
  Link to video
</a>
<a target="_blank" href="https://my-hosted-files.com/onboarding.docx">
  Link to document
</a>

This works for most browsers, but on iOS Safari, I'm encountering a very specific bug.

This is expected behavior

1. User taps any link other than those leading to an MP4 file.
2. New tab opens, with a prompt to view or download.
3. When user taps "download", the original list page is shown with a download icon at the top right of the browser. From there, the user can view the downloaded file.

This is a bug

1. User taps a link to a MP4 file.
2. MP4 video plays in a new tab.
3. When user taps the "x" icon to exit out of the video, screen goes back to the original list page.
4. If user taps the video link again, video plays in a new tab. But when user taps "x", the video auto-plays again.
5. Meanwhile, if user taps a non-MP4 link after 3, the prompt to a prompt to view or download appears as expected. But when user clicks "download", the video from before starts to auto-play.

4 and 5 are not acceptable behaviors. I've tried trying different things, like adding rel="noopener noreferrer" and download to the anchor tag but to no avail. How can I fix this so users can still download non-MP4 files after viewing the video?

Thank you in advance.

Answer 1

I ended up removing target="_blank" just for links to MP4 files. Since the original tab is preserved even without target="_blank", it was not necessary.