Video playback blackscreen on fullscreen mode

[hungpv1]

• I have a page that have multiple vimeo videos using <iframe> with an overlay to show it as an image grid.

Expected Behavior

• When user click on the overlay, it will play the video behind the overlay in fullscreen mode.

Actual Behavior

• When I tested it in some mobile/tablet device it getting a black screen when the video open in fullscreen mode but I can still hear the sound of the video. If I toogle Picture In Picture mode, the video is show nomally.
• This issue only happened randomly, If I open the video again, it might be play normal.

Steps to Reproduce

Add multiple iframes with

<div>
    <iframe src="https://player.vimeo.com/video/{{item.video_id}}?loop=1&h={{hash}}" frameborder="0" allow="autoplay; fullscreen" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
    <div class="iframe-overlay" data-video-id="{{video_id}}" ></div>
</div>

And use this script

const iframeOverlays = document.querySelectorAll('.iframe-overlay');
    var ifr;
    var plyr;
    var playedVideo = [];
    var isFirstInit = true;
   
    iframeOverlays.forEach(function(iframeOverlay) {
        var videoId = getVideoId(iframeOverlay);
        iframeOverlay.addEventListener('click', function() {
            ifr = iframeOverlay.parentElement.querySelector('iframe');
            plyr = new Vimeo.Player(ifr);
            var idVideo = getVideoId(iframeOverlay);
            plyr.requestFullscreen();
            if (!playedVideo.includes(idVideo)) {
                playedVideo.push(idVideo);
                plyr.play().catch(error => {
                    console.error('Error play video:', error);
                });
            } else {
                plyr.setCurrentTime(0).then(function(seconds) {
                    plyr.play().catch(error => {
                        console.error('Error play video:', error);
                    });
                }).catch(error => {
                	console.error('Error set video time:', error);
                });
            }
            if (isFirstInit) {
                isFirstInit = false;
                plyr.on('fullscreenchange', function(player) {
                    console.log('fullscreen event trigger');
                    if (!player.fullscreen) {
                      plyr.pause();
                    }
                });
            }
        });
    })

Please help me to investigate or let me know what I do wrong. Thank you!

Record video of the issue:
https://www.screencast.com/t/PY1H1TniK
https://www.screencast.com/t/4s5LPMsr

[andrii-marushchak]

I have the same issue

[bdougherty]

@hungpv1 @andrii-marushchak are either of you able to set up a test page outside of your site that also has the same issue?