Open Youtube Video in Lightbox

Here’s where I am now… but it took me all morning for something that should be really simple….

http://www.thomashenthorne.com/marin-luxury-homes-sizzle-reel/

I ended up pulling the thumbnail from Youtube, then going into Photoshop and creating an image with the red “play” button graphic, then merging those two, then saving as an image, then linking the image on the page to the Youtube video but with the special format Yigit suggested in different thread to different user, then I had to create “only_desktop” css class because on mobile this version doesn’t work (have to hit two clicks) whereas the normal insert video element works great on mobile (e.g. launches Lightbox).

The video element on desktop should also by default launch a lightbox… this is a lot to go through just to have a Youtube video launch in lightbox, yes?

Help…..

Thanks!!!!!!!!!!
Rob

Thanks for your response as always, Yigit!

I was afraid that was going to be the case, that launching a video in lightbox in desktop is an enhancement even though in mobile that’s already the behavior. I think this is something between a bug and an enhancement but I won’t debate…. :)

The issue I run into and the reason I’m using Lightbox for the video is that if I just use the video element, it’s HUGE on the page…. and if I put it inside a layout element (1/5 + 3/5 + 1/5) then it looks too small (Goldilocks…)

Is there a different way to get at the goal, which is to have a nice centered video that is larger than the 3/5 above but smaller than the full screen that the video element produces?

Thanks!!!!!!!!

That is a very good idea… I will try that and let you know how it goes!

I am going to bump my own thread from a couple years back…. has the ability to launch Youtube videos in lightbox been added to Enfold yet? As I recall, this capability used to exist?

Thanks,
Rob

I have seen the iframe=true recommendation in other threads and feedback from users is that it no longer works.
I tried it in this format:

and there was no change in behavior. Same if I get rid of the rel=0 parameter.

It appears from this Youtube developer URL that there is a way for Enfold to include this capability:
https://developers.google.com/youtube/player_parameters

“Embed a player using an <iframe> tag
Define an <iframe> tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The <iframe> tag’s height and width parameters specify the dimensions of the player.

If you create the <iframe> element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:

https://youtube.com/watch?v=VIDEO_ID

The <iframe> tag below would load a 640x360px player that would play the YouTube video M7lc1UVf-VE. Since the URL sets the autoplay parameter to 1, the video would play automatically once the player has loaded.

<iframe id=”ytplayer” type=”text/html” width=”640″ height=”360″
src=”https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com&#8221;
frameborder=”0″></iframe>”

I tried adding the above code to a code block on a dummy page and it does not launch lightbox either… are you sure Enfold is set up to do lightboxes for Youtube? Maybe Gunter can add a checkbox option to the video media element?

Thanks!
Rob

Ismael,
That’s interesting – thanks… so we use an image element and then use a Youtube link. That does work – but I’m curious, why doesn’t this work on the video element?

This seems like an odd workaround? Is there a way to get the “play” button to appear the entire time vs. just on hover… when people see the image they may not realize it’s a video.

And then on mobile, it just looks like a photo and you can’t tell it’s a video if you click.. what do you recommend? Use photo element with link for desktop and use video element with link for mobile? It would be so wonderful if video element would just do this… ;) Or is there another solution?

Thanks!!!
Rob

That’s a lot of work just to get a lightbox… but thanks, I have taken this approach in the past and had forgotten it.
You have to:
1. Create image with play button
2. Insert via photo element with custom link
3. Code as display on desktop only
then
1. Insert video element
2. Code as mobile only

Glad to hear from another thread that Gunter has added this to the future workflow…. given how pervasive video is now I would hope we can have an easier solution soon. Thanks for reminding me of this approach! OK to close thread.

Best,
Rob

Hi Günter,
Perhaps it is… I have iPhone, and the video element launches perfectly in a lightbox.
Please let me know if I can be of any assistance.

Best regards,
Rob

Hi Hi Günte & Ismael,

I was excited to download and install the new Enfold version which allows desktop lightboxes! Thank you!

I learned it is definitely important to use the specific video url format Ismael listed above. I did notice that the rel=0 parameter, which causes Youtube to only show related videos from your own channel when user pauses or ends video, is not working. Is that being passed to Youtube?
format: https://www.youtube.com/watch?v=HwKzLYeeOMs?rel=0

Thanks,
Rob

Yigit! Good to hear from you again!

Thanks much – you are right, I flushed browser and it works! I can’t believe after all these years that still trips me up haha. :)

Any ideas on the rel=0 (related videos only for your own channel)?

Thanks!!
Rob