Custom Lightbox Similar to Apple

I’d like to do something similar to what Apple is doing on this page with the “Everything changes with iPad” (iPad - Apple). The image spans the width of the page. The user clicks the “watch the film” link and the video appears on a separate page with a close out.

Is this possible? And if so, could you provide a little direction? Or point me toward a topic on the forum or a video/article on Weblfow that can show me my options and how to achieve?

I’m looking to embed video in my website. It will be hosted on Vimeo and I want to incorporate a window on the website.

I’ve gone through the forum, but haven’t really found a post that addresses my question.

Thanks in advance.

this post should help you out. Instead of static content in the modal, you can put a video embed :smile:

Hi @chrisgreer33, I whipped something up real quick, does an example like this help? This site is clonable.

http://example-intro.webflow.io/
https://webflow.com/website/example-intro?s=example-intro

Cheers,
Dave

1 Like

That’s exactly what I was looking for. Thanks so much Dave. Huge props.

Dave:
I tried following your example. Results have been hit or miss. Can you review what I’ve done and see where I dropped the ball?

The section with the launch video button is the first “Dark image stripe” section under Body.

https://preview.webflow.com/preview/bok-unitedway-2015?preview=2a75bb53877e43a5ce938a26cf81edf5

Hi @chrisgreer33, thanks for the update. I checked the link you provided and on the home page, I do not see the open video or video lightbox at all, just the two title boxes. Can you check that?

Sorry about that. What I did jacked up my entire site so I had to go back to an earlier version.

I’ve now added a Home Section just like your example; it’s right under “Main Menu.” I set it up just like your example, but not working. And it added a white line above the box for some reason.

Hi @chrisgreer33, add the following code to the footer of your site in the Custom Code tab of Site Settings. Save changes and then republish and test again.

<script>
$(document).ready(function() {
  $("#lightbox-link").click(function(e) {
    e.preventDefault();
    $("#video-lightbox").trigger('tap');
    console.log('trigger tapped');
  });
});
</script>

Cheers,
Dave

1 Like

No good. Nothing changed.

http://bok-unitedway-2015.webflow.io/

Hi @chrisgreer33, can you add at least one media element to the lightbox? I don’t think it is opening, because there is no media to show. Add a video like in my example to the lightbox. Save changes, republish, check again :slight_smile: Dave

I keep adding the video link (Economic Outlook with Jim Huntzinger (3.12.2015) on Vimeo) and it turns red, but when I publish it disappears.

Hi Chris, it looks like that link is not being accepted, are you able to share this video privately and get a share link? Or is this the share link that was generated? For example, when you go to a public vimeo video, you will see the share icon, and you can copy that link, it looks like:

https://vimeo.com/15378651

This is the Vimeo share code. The only other code I can pull is an embed code:

Hi @chrisgreer33, on that video, can you enable the share icon, so that the link can be copied directly from the video player?

If I can, I’m not sure how to accomplish that. I tested this URL (Economic Outlook with Jim Huntzinger (3.12.2015) on Vimeo) and it works in other browsers. Any idea why Webflow is rejecting it?

Hi, you should be able to set the video settings in vimeo to show the share icon, I am not sure the exact procedure from their dashboard. When I try to open that link, ti opens an unusual looking player page… We use embedly for the vimeo embeds, so if this is some kind of private share, there might be some different settings for that.

In general, if you can get the link to the video as it is given in the share icon, that url should work

If must have been the Vimeo problem. I substituted a YouTube link and it fired up. Thanks for all the help and time on this.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.