Backport video source fix for iOS into v1.13.3 (#12524)

* Prevent fullscreen video source in iOS (#11067) Co-authored-by: Ricky Reusser <[email protected]>
mapbox · Jan 17, 2023 · 0b0fed8 · 0b0fed8
1 parent 4c7e345
commit 0b0fed8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### 🐞 Bug fixes
 
 * Fix incorrect billing when `customAccessToken` is provided along with non-Mapbox tiles ([#12520](https://github.com/mapbox/mapbox-gl-js/issues/12520))
+* Prevent video sources from entering fullscreen on iOS Safari ([#11067](https://github.com/mapbox/mapbox-gl-js/issues/11067))
 * Upgrade minimist to ^1.2.7 to avoid [CVE-2021-44906](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44906) ([#12442](https://github.com/mapbox/mapbox-gl-js/issues/12442)) (h/t @Spasfonx)
 
 ## 1.13.2

diff --git a/src/source/video_source.js b/src/source/video_source.js
@@ -79,6 +79,9 @@ class VideoSource extends ImageSource {
                 this.video = video;
                 this.video.loop = true;
 
+                // Prevent the video from taking over the screen in iOS
+                this.video.setAttribute('playsinline', '');
+
                 // Start repainting when video starts playing. hasTransition() will then return
                 // true to trigger additional frames as long as the videos continues playing.
                 this.video.addEventListener('playing', () => {