Streaming live at 10am (PST)

Custom Lightbox Similar to Apple


#1

I’d like to do something similar to what Apple is doing on this page with the “Everything changes with iPad” (http://www.apple.com/ipad/change-everything/). 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.


#2

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


#3

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


#4

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


#5

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


#6

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?


#7

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.


#8

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


#9

No good. Nothing changed.

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


#10

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 smile Dave


#11

I keep adding the video link (https://vimeo.com/user20310987/review/122023747/8a6b71ea96) and it turns red, but when I publish it disappears.


#12

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

#13

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


#14

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


#15

If I can, I'm not sure how to accomplish that. I tested this URL (https://vimeo.com/user20310987/review/122023747/8a6b71ea96) and it works in other browsers. Any idea why Webflow is rejecting it?


#16

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


#17

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.


#18

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