Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lightbox for video element #741

Closed
maorb opened this issue Oct 18, 2016 · 13 comments

Comments

Projects
None yet
6 participants
@maorb
Copy link

commented Oct 18, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Oct 20, 2016

@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?

@arielk arielk changed the title Enhancement to video element [Enhancement] Lightbox for video element Oct 20, 2016

@arielk arielk changed the title [Enhancement] Lightbox for video element Lightbox for video element Oct 20, 2016

@maorb

This comment has been minimized.

Copy link
Author

commented Oct 20, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Oct 20, 2016

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

This comment has been minimized.

Copy link
Author

commented Oct 20, 2016

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

This comment has been minimized.

Copy link

commented Oct 20, 2016

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

@arielk

This comment has been minimized.

Copy link
Contributor

commented Oct 21, 2016

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

@maorb

This comment has been minimized.

Copy link
Author

commented Oct 21, 2016

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

This comment has been minimized.

Copy link

commented Feb 13, 2017

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

@arielk arielk added this to the 1.3.0 milestone Feb 19, 2017

@arielk

This comment has been minimized.

Copy link
Contributor

commented Feb 28, 2017

Added for the next version: #1376

@arielk

This comment has been minimized.

Copy link
Contributor

commented Mar 6, 2017

v1.3.0 released!

@arielk arielk closed this Mar 6, 2017

@copen8

This comment has been minimized.

Copy link

commented Mar 6, 2017

@katart

This comment has been minimized.

Copy link

commented Apr 27, 2017

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

@tannerchung

This comment has been minimized.

Copy link

commented May 26, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.