Video playback blackscreen on fullscreen mode

I have a page that have multiple vimeo videos using with an overlay to show it as an image grid.</li> </ul> <h3>Expected Behavior</h3> <ul> <li>When user click on the overlay, it will play the video behind the overlay in fullscreen mode.</li> </ul> <h3>Actual Behavior</h3> <ul> <li>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.</li> <li>This issue only happened randomly, If I open the video again, it might be play normal.</li> </ul> <h3>Steps to Reproduce</h3> <p>Add multiple iframes with</p> <pre><code><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></code></pre> <p>And use this script</p> <pre><code>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(); } }); } }); })</code></pre> <p>Please help me to investigate or let me know what I do wrong. Thank you!</p> <p>Record video of the issue: <a rel="noreferrer nofollow" target="_blank" href="https://www.screencast.com/t/PY1H1TniK">https://www.screencast.com/t/PY1H1TniK</a> <a rel="noreferrer nofollow" target="_blank" href="https://www.screencast.com/t/4s5LPMsr">https://www.screencast.com/t/4s5LPMsr</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/andrii-marushchak"><img src="https://avatars.githubusercontent.com/u/31574759?v=4" />andrii-marushchak</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>I have the same issue</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bdougherty"><img src="https://avatars.githubusercontent.com/u/15747?v=4" />bdougherty</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>@hungpv1 @andrii-marushchak are either of you able to set up a test page outside of your site that also has the same issue?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

vimeo / player.js

Video playback blackscreen on fullscreen mode #1025