search

biati-digital / glightbox

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
MIT License
2.03k stars 228 forks source link

Youtube lightbox loads infinitely if there is another Youtube IFrame API element defined #394

Closed joonhyungshin closed 12 months ago

joonhyungshin commented 1 year ago

Describe the bug If you define a valid Youtube IFrame API element using YT.Player(), then GLightbox would not load a Youtube video.

To Reproduce

  1. Copy-and-paste below code to 'index.html'.
  2. Open with an innocent web browser.
  3. Click on 'Lightbox' link.
  4. Loads infinitely.

Expected behavior A Youtube video should show up and play

Post the code you are using Minimal reproducible example:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
        <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    </head>
<body>
    <div id="player"></div>
    <a class="glightbox" href="https://youtu.be/M7lc1UVf-VE">Lightbox</a>
    <script type="text/javascript">
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        function onYouTubeIframeAPIReady() {
        const player = new YT.Player('player', {videoId: 'M7lc1UVf-VE', width: '640', height: '360'});
        }
        const lightbox = GLightbox({
            descPosition: "right"
        });
    </script>
</body>
</html>

Screenshots If applicable, add screenshots to help explain your problem.

Desktop:

biati-digital commented 1 year ago

This is a known issue, when the site includes the youtube or vimeo API, Plyr never triggers the "ready" event when loading a video slide. We'll need to check if other Plyr methods can fix this problem

jwdevel commented 1 year ago

I just hit this as well. Just using plain <iframe>, no YT.Player stuff.

Is there any workaround?

biati-digital commented 1 year ago

@jwdevel no workaround yet

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.