Lightbox for video element

[maorb]

Hi,
A great enhancement to the video element will be an option to allow playing the youtube/vimeo inside a lightbox/modal window in the middle of the screen. It will be very useful combined with image overlay, but also for the normal use.

[arielk]

@maorb I understand how it should work with image overlay, but how it will work in normal use, do you have an example of that?

[maorb]

@arielk The way I did it once was to also use image overlay. So, if one wants to open the video inside a lightbox, I auto grabbed the video's featured image from youtube
(this is url for the image on youtube - http://img.youtube.com/vi/VID_ID_HERE/0.jpg )
Aso, you may file_get_contents of url - http://youtube.com/get_video_info?video_id=VID_ID_HERE and get a string of paramters which can be later parse_str and use to get the title of the video for example and display it above the image and in the lightbox and so son.
Then, also put a custom image of the YT player above the video's featured image, absolutely posined in the middle of that.
So the end result for the user browsing is a window that looks similar to youtube (the big red play button and the image of the video), but the video itself will load to the lightbox after user presses the play button.

You may see example for this here: http://www.acri.org.il/education/our-vision
Take a look somewhere in the left sidebar, look for the youtube video, and then firebug it and see the behind. (For now they have a YT video in lightbox, but they can control this via their admin panel, so I hope you will able to see it before they may change the video there)

Take a look also in the use of the iframe itself in the lightbox - the iframe src is being loaded only when user aasks to watch the video, which is better, since bo loading for iframe before that or on page load that may slow the page. (that is more important if you have a page with several yt iframes that should be loaed).

I assume Vimeo can be approached in a same way.

[arielk]

OK I guess it's possible, but I would prefer to keep it simple on the image overlay mode

In any case we will consider including it in future updates, thanks for your feedback!

[maorb]

Thank you very much :)
You may keep it simple on the image overly mode only, and than if one want to, he will be able to load an image that is same as the video's featured image and it will somehow result the same to users viewing the site.

[walidmahade]

@arielk you can consider something same as the image gallery. Same functionality . Video Gallery.

[arielk]

We're considering adding this feature to additional widgets, such as a image, heading, button, etc

[maorb]

p.s. @arielk Is there a way today to use the image carousel element with a lightbox efferct?
I haven't found an option to that, so I implemented lightbox with custom js on the gallery element.

[copen8]

I would also like too see a feature like this implemented in Elementor or Elementor Pro.

[arielk]

Added for the next version: #1376

[arielk]

v1.3.0 released!

[copen8]

Briliant. Thank you for the best plugin ever. Elementor for the win. Really appreicate the work you guys are doing. [😃]

…

________________________________ Från: Ariel Klikstein <[email protected]> Skickat: den 6 mars 2017 19:10 Till: pojome/elementor Kopia: copen8; Comment Ämne: Re: [pojome/elementor] Lightbox for video element (#741) Closed #741<#741>. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#741 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVhJPCy-cdur4GAWO4eNSE8-2T86DX9xks5rjEwLgaJpZM4KZw8e>.

[katart]

Can that lightbox script be used (or targeted) in other areas of the site?

[tannerchung]

Anyone have tips on debugging the issue if the lightbox is not coming up? I'm using OceanWP on this one site so I'm not sure if there's any conflict. When I use it for my other sites, the lightbox work. I check the console and there's no errors and I know the video is playing because there's the video's sound playing.