Lightbox stack for Vimeo & Youtube

I’m sure this has been covered, but not sure if the answers currently reflect the state of the art.

I use Vimeo and YouTube to exhibit my work. Is there a Stack that allows me to create a lightbox with a pop-up player that works with Vimeo and YouTube? Something like WeaverSpace’s Video Wall, but that seems to require embedded video. VideoPlus accommodates Vimeo and YouTube, but requires a separate thumbnail file, and I have a few dozen videos to display, and the poster frame in Vimeo and YouTube are good enough for my purposes.

Edit: I have the Foundry Stacks. But, I didn’t see any of the video players on their site that looks like what I’m seeking.

There are probably several, but my first thought is with Stacks4Stacks TopBox stack:

I use it all the time for lightboxing videos from a link. But it can be used in many other ways. Stacks4Stacks offer other video stacks also: so peruse the site.

You didn’t say, but if you use Foundry, or Foundation, or another framework. If so then those frameworks probably offer you some options also.

1 Like

If this is any help, this is Video Wall in action. Scroll down to the video sections. These videos are hosted by Youtube, they are not embedded and are generated from Youtube playlists.

The first section is my Youtube channel but the second section is a playlist on my channel to which I have added videos from other channels.

The advantage is that as soon as a video is added to the channel, it appears on the page. Click on the videos to play in the lightbox.

1 Like

Thanks for the replies. I’ll check out the demo of TopBox, Matthew. I have Foundry, and looked on their site for what I’d like, but didn’t find one.

Gary, I think I found the Stack that does what you used, but I don’t want to access a whole “channel” of videos, but rather, specific videos on Vimeo and YouTube.

Here’s my site, using the VideoEmbed Foundry Stack. As you can see, it loads all my videos in huge frames, which I find less than appealing, and it’s possible to play more than one video, which is likely to cause some consternation.

James, the videos can be selected by ‘channel’ but also by ‘playlist’ so you just add the videos you want to show to the playlist. I’m showing two playlist videos, CB300R and CB300R Review, both playlists created by me on my channel.

I’ve got dozens of videos on my channel, but the test site is only showing those in the playlists above. The first section is the CB300R playlist (my videos) and the second is CB300R Reviews.

1 Like

These are the stack feed options for Youtube and Vimeo.

Gary, thanks for the additional detail and screenshots. I don’t see an option for single videos for either Vimeo or YouTube on your screen shots. Although I could create a Group on Vimeo for the videos I want to feature, one of my clients would prefer I used their YouTube links for my exhibition. Since I don’t produce all the videos on their channel, that presents a deal-breaker.

Seems like I could use the Grid Stack to create my own video gallery, but I also want the videos to pop-up to a larger size, either their native HD, or fill the screen. I’ve experimented with this (using VimStack, uTube Channel, MultiPlayer, Video Embed, and Video Plus), and Video Plus pops up the video size, but then I’m back to using Video Plus. The other video stacks I have just play the video in the little gallery space.

With YouTube, you don’t have to host the videos on your channel, you merely view the video on their channel and add it to one of your playlists. I don’t use Vimeo, so no idea how their channels and playlists work.

As for just adding one video, set the option to ‘newest’ and set the number of videos displayed to one. Not ideal, but it works.

I only posted screenshots of the YouTube and Vimeo feeds, not the settings for the Video Wall stack itself.

Good luck anyway, I hope you find a way of doing what to need to do.

Gary, unfortunately, if I used “newer” on the YouTube option, the video would change as soon as my clients added another video, and it might not be one of mine.

However, you’ve given me an idea. I believe YouTube allows a channel that’s not viewable by the public, and if so, I could create one in which I only added videos that I produced. I will investigate that further.

One of my colleagues has a page that’s close. I’ll have to ask how this was made. I don’t think he did it. But, what it does that mine doesn’t is stops one player if you start playing another video:

If anybody can “Name That Stack,” that would be awesome! (it was probably not made in RW.)

Until then, this may give some Stack developer an idea for a new Stack to serve a purpose

@jpc The example page, however, does not auto-lightbox the videos. So what’s close? I can’t tell if they are using self-hosted videos or potentially something from YouTube/Vimeo. But they look self-hosted.

With Topbox you can definitely take a snapshot of a video, then use that image as the basis for auto-lightboxing when a person clicks on it. When you “escape” the lightbox it will stop. So you don’t run into the problem of multiple videos playing at the same time.

1 Like

Matthew, I concur that Franko’s videos are probably self hosted. I just wrote and asked him how this was done.

What’s “close enough” is that the videos aren’t taking up the entire width of the browser, and they can be zoomed to full screen, and stop when you play another video.

Topbox may do what I want. I downloaded the demo and will play with it some later. Thanks for the tip and your reply.

Stacks like that are to be put in a Container, Columns or Margins stack to set their width at different screen sizes.

@jpc Exactly what @thang said. I think I’m getting confused about what you really want. It looks like a good use of container and columns stack would meet your needs when combined with the Video Zoom stack that comes with Foundry. (Sorry, it may come with one of the addon packs: I don’t remember.)

Originally you wrote that you didn’t want to have to use a separate thumbnail image. That’s what you need with Video Zoom. It would seem easy enough to do, but …

your friends website uses simple embeds. All Vimeo and YouTube embeds come with the ability to expand to full width of the screen if you want. Again, you’d want to use a container stack with a column stack (probably) to accomplish the look you want. But there’s not need for the video to take up the full width of the browser when not lightboxed. That’s where containers, padding, margins, etc. come in.

1 Like

If you’re confused, Matthew, imagine how I feel. I bought Stacks last week, and am dipping my toes in what it can do. I was a little perturbed to learn that if you want to start with a blank canvas, and build a site from scratch, that costs extra. So, I bought Foundry, and that has 70-some new tools to learn. But, the more I look into what can be done, I get greedy and want more. :slight_smile:

I fooled around a little more with Grid and TopBox, and I think I can make that work (and may need to deploy Container, Margin, and / or Columns, too). As you wrote, I’ll have to generate my own thumbnails / poster frames, but I guess that’s just a necessary step to get where I want to go if I don’t choose the VideoWall Stack route (which uses channels and groups in YT and Vimeo).

I was hoping that “drag and drop simplicity” was a lot more simple. But, alas.

BTW, my friend Franko used Squarespace, and those are indeed embedded videos.

@jpc Ah, your last post makes everything clear now. Ok, I understand.

In this case you are diving into the deep end before getting the basics down. Foundry has outstanding text and video help. I realize there are so many features you may not know where to begin. So let’s forget the video for a moment: that will get sorted out. I suggest learning about the following fundamental Foundry stacks:

  1. Container: https://foundry.elixirgraphics.com/documentation/container/
  2. Margins: https://foundry.elixirgraphics.com/documentation/margins/
  3. Columns: https://foundry.elixirgraphics.com/documentation/columns/
  4. Grids: https://foundry.elixirgraphics.com/documentation/grid/

Once you’ve learned about those things then you have a foundation for creating much more complex things. What you want is not that complex, but you’ll want the foundation first.

The portal to all documentation is here: https://foundry.elixirgraphics.com/documentation/

I hope this helps.

2 Likes

I’ve watched all those, and more, but it’s not going to hurt to keep watching them until it sinks in.

I think I’m going to end up using VideoPlus with Columns or Grid & Margins to make my own quasi-gallery view. Once I generate the thumbnails for VideoPlus, I can use the VideoPlus within the Margin Stacks with the code in them to apply to a variety of configurations. I think. :slight_smile:

Thanks again for the info.