Close Lightbox Youtube video after has been playes with data-lity

[rodboc]

Hi Guys,

I've used data-lity method to open the lightbox, like this

<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>

But I haven't found the way to close the lightbox after the video has been played. Is there any way to get this done? I've seen another example related but only works when the instance is defined on JS.

Cheers guys

[rodboc]

No one?

[ZIPITRO]

Please click outside of the layered window and it will close. Or do you need some other solution, please be patient for an answer,its holiday time.

Rod schreef op 2018-12-17 02:09:

No one?

-- You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub [1], or mute the thread [2].

Links:

[1] http://url9772.1zip-it.com/wf/click?upn=mjDqSBHGADr2BMW0-2FyV0i4uQtZIB1ZyWPRebsRxdQT7Eoy-2BH-2FNpbOMZgfUHi8e93TAcjNwQgkkcDIhS-2B-2BaHBF-2B9N8Gq57-2FIe-2B6x9A0aPfw0-3D_s5UH8bhnBaopYjthcNSRcVi4tnOWiMuikNxcr-2BjNV3mwKp4y7dj4er222xXrLWQGXoLSPQcfHJVHscZP9P-2FiUhVFdmH-2F5LAS6MkNNzW1Ae-2FtkRWvu1FSx-2FJejTnl9bRRebzp4wm37UkCl-2BWShcMT7KIznwqMfoFNV7-2FcheIaxyzLXwhGacKso5XU5oqM6LN8oOoWstcjPNqMpUKSklp4Dwibbxm32xeTnBXBUZt9ptot8K56SaH5wpqgaMJLM1yl-2BH6xhB9icK99RriO9eu5Y-2FKl-2FUFuQWiWgW3xHsMlLF2mlmljLOcWobKqwGzO8DykP-2BEt6Ab-2BBLbp1-2FjM6v5f9w-3D-3D [2] http://url9772.1zip-it.com/wf/click?upn=mjDqSBHGADr2BMW0-2FyV0iy5SdA-2FFmmcoaRFrNITgaKG2K17rVe2YosD-2BjcJF3aeKonqatM5hMckqUMyo-2FN5Zg1i2rgOMgVud6VLHWk-2FPG-2BcP2NNOsUXTZRYyBk-2BTCdlCoY0sdyIDc38Ja1RxYfqjJQ-3D-3D_s5UH8bhnBaopYjthcNSRcVi4tnOWiMuikNxcr-2BjNV3mwKp4y7dj4er222xXrLWQGXoLSPQcfHJVHscZP9P-2FiUhVFdmH-2F5LAS6MkNNzW1Ae-2FtkRWvu1FSx-2FJejTnl9bRRebzp4wm37UkCl-2BWShcMT7KIznwqMfoFNV7-2FcheIaxyzLXwhGacKso5XU5oqM6LN8snzy0PXUFPsX1akuKN2EOta3smlLizSciC4umBEv58MuQjc-2BtvdOZgo4z-2B2lFw-2Bp6thW75JSpM3y02RPkkJVAlG1pHbobojNIgu8kdZB-2F0lQDvaZSKSMINnFSyQNU-2BjeCNYmeFWO0YOuGpk7My8nwA-3D-3D

[trockendock]

I am facing almost same issue. I do want to close the lightbox from inside the iframe (meaning: target parent window to close the iframe).

I also read something about opening it programmatically, but not understanding it at all...

Thanks for any help

[trockendock]

just played around a bit:

opened iframe with

<script>
var myLity=null;
$('a').on('click',function(){
  myLity=lity('iframe.html');
  myLity.opener();
});
</script>

and then tried to close it from inside iframe with

<script>
$('button').on('click',function(){
    $(window.parent.document).myLity.close();
});
</script>

...unfortunately not working. somehow the parent window is not targeted or the opened instance "myLity" is not handed over...

[naton]

If I understand your question correctly, you’ll need to listen to the events emitted by the YouTube player within the iframe. Then you’ll be able to detect when the video has finished playing. See here for some examples: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

[MPJHorner]

It's pretty simple, I've done it with Vimeo using like this (I assume YT has something similar).

  <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
        $(document).on('lity:ready', function(event, instance) {
            console.log('Lightbox ready');
            var iframe = $('div.lity-container iframe')
            var player = new Vimeo.Player(iframe);

            player.on('ended', function() {
                console.log('Finished.');
                instance.close().then(function() {
                    console.log('Lightbox closed');
                });
            });
        });
    </script>

[Darkseal]

Here's the Youtube version:

HTML

<link href="/lib/lity/3.0.0-dev/lity.min.css" rel="stylesheet">
<script src="/lib/lity/3.0.0-dev/lity.min.js"></script>
<script src="/lib/lity/3.0.0-dev/plugins/youtube/youtube.min.js"></script>

<a href="https://www.youtube.com/embed/DAIR374gDKA?enablejsapi=1" data-lity>Play</a>

JS

  <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
  <script type="text/javascript">
      $(document).on('lity:ready', function (event, instance) {
          var iframe = $(".lity-iframe-container").find("iframe");
          iframe.prop("id", "lity-youtube-player");
  
          var player = new YT.Player("lity-youtube-player", {
              events: {
                  'onReady': function (e) {
                      e.target.playVideo(); // <- autoplay video
                  },
                  'onStateChange': function (e) {
                      if (e.data == YT.PlayerState.ENDED) {
                          instance.close(); // <- auto-closes lity after video ends
                      }
                  }
              }
          });
      });
  </script>

IMPORTANT NOTES

• the enablejsapi=1 parameter is required.
• Lity 3.0.0-dev or greater is required, as v2.4.1 (the currently "stable" one) has a weird QueryString handling feature that breaks the enablejsapi parameter while "forcing" the autoplay parameter, thus messing up everything. Luckily enough, v3.0.0-dev fixed such behavior.

For additional info & samples, read this post.

N.B.: If the author is up for it, I wouldn't mind add the Vimeo and Youtube APIs to the corresponding lity plugins to trasform these hacks into lity's legacy functions: drop a note if you're interested :)

[phenix-it]

Here's the Youtube version:

HTML

<link href="/lib/lity/3.0.0-dev/lity.min.css" rel="stylesheet">
<script src="/lib/lity/3.0.0-dev/lity.min.js"></script>
<script src="/lib/lity/3.0.0-dev/plugins/youtube/youtube.min.js"></script>

<a href="https://www.youtube.com/embed/DAIR374gDKA?enablejsapi=1" data-lity>Play</a>

JS

  <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
  <script type="text/javascript">
      $(document).on('lity:ready', function (event, instance) {
          var iframe = $(".lity-iframe-container").find("iframe");
          iframe.prop("id", "lity-youtube-player");
  
          var player = new YT.Player("lity-youtube-player", {
              events: {
                  'onReady': function (e) {
                      e.target.playVideo(); // <- autoplay video
                  },
                  'onStateChange': function (e) {
                      if (e.data == YT.PlayerState.ENDED) {
                          instance.close(); // <- auto-closes lity after video ends
                      }
                  }
              }
          });
      });
  </script>

IMPORTANT NOTES

* the `enablejsapi=1` parameter is required.

* Lity 3.0.0-dev or greater is required, as v2.4.1 (the currently "stable" one) has a weird QueryString handling feature that breaks the `enablejsapi` parameter while "forcing" the `autoplay` parameter, thus messing up everything. Luckily enough, v3.0.0-dev fixed such behavior.

For additional info & samples, read this post.

N.B.: If the author is up for it, I wouldn't mind add the Vimeo and Youtube APIs to the corresponding lity plugins to trasform these hacks into lity's legacy functions: drop a note if you're interested :)

Hi @Darkseal how to get your version?