- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Video Lightbox
Hi there
Am wondering if there is a relatively easy way to add video lightbox/popup functionality that does NOT require buying an app.
I have video lightbox, modal pop apps etc already and while they do work, they slow page loading down, particularly as I have a need to use this functionality up to 25-35 times per page.
Currently I link to videos via thumbnail images and the youtube/vimeo videos open in a new page. I would much prefer to show the videos in lightboxes / popups in the same page so the user isn't always being redirected away from the site. Using the weebly youtube video element is out of the question due to size/page loading issues etc - it needs to be a lightweight solution.
Any ideas would be very much appreciated
Thanks
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@Re-Made The issue with your slow page load isn't directly related to your lightbox presentation. The slow page load is a result of the sheer number of videos you've placed in the page. By default, all videos embedded in the page html will load with the page even if they are each revealed only by way of a modal dialog. Having a couple of dozen videos embedded in the page is definitely going to slow things down regardless of whether or not you can see them when the page loads (because, by default, they're all going to load when the page loads).
If you have access to each video's html, you could use the preload="none" attribute (with autoplay off) on each video to ensure that it doesn't load when the page loads (the video is only (manually) playable after it is called via the modal dialog).
<!-- Video that does not load with the page --> <video width="600" height="400" controls preload="none"> <source src="my-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
If you don't have access to the video html then you might consider the somewhat less elegant (than a lightbox) approach of embedding each video in an external location on the site. One potential solution would be to use a blog page where each video occupies a separate blog post. Each link on your main page that currently launches the video via a lightbox would be modified to link to the blog post instead. Within each video post could be a "back to main page" link or button that returns the visitor to the main page. It's a bit of a clunky approach but it keeps the visitor on your site and fully addresses the slow page problem.
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi Paul
Thanks very much for going in to so much detail.
I don't have the HTML unfortunately as I just link to videos via the image element, using the URL (hence the jump)
I am using the video lightbox app on a single test page and there is only capacity to add a URL, no other options, so unless there is something I can add on to the end of the URL itself, it sounds like I can only use apps like this on scaled-down pages, by what you are saying.
I like your blog idea and something to think about - I would like to see if there is a way to keep people on page, though...
Are you able to recommend any HTML video lightboxes, which I can add this "no preload" code to, by any chance?
Thanks very much again - much appreciated
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@Re-Made Can you share the url of the page with the videos?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi Paul
I actually deleted it after I posted my reply, but I have set up another (far less populated) test page with 2 video lightbox examples on them, which you can find here:
https://www.re-made.life/lightbox.html
Thanks very much for this 🙂
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@Re-Made Wow. That is a seriously customized, media-rich site. In browsing through the immense library of content, I'd suggest that a video lightbox approach is actually not the way to go (notwithstanding the non-minor issue that imposing no preload on YouTube videos is not a simple task). Even if we could easily make the YouTube videos not preload, given the media library nature of your site, that approach is probably not the best design solution.
In this page on your site: https://www.re-made.life/films-creativity.html, you have Pinterest-style mini content boxes (segregated by alphabetic range) to hold the plethora of videos under the category. A better approach might be more akin to what YouTube themselves does with the "thumbnail preview video" gallery on their main page (https://www.youtube.com/). Notice that they don't use a lightbox approach but rather launch each thumbnail preview video in its dedicated YouTube page. This approach is almost exactly the same as employing a blog to house media content.
The video preview thumbnails on the YouTube main page don't consume much bandwith so you can have quite a lot of them on the page and each one links to its particular full-video "post." Your page appears to employ a categorization tool for the videos which segregates the videos into alphabetic ranges. I'm not quite sure why that was chosen (beyond a way to simply limit the number of videos you see at one time on the page) but effectively, it's a blog type filtering approach with a Pinterest-style masonry grid presentation. If you used an actual blog approach, each video would be its own page entity (rather than being contained within an alphabetic range box entity) and clicking a "read more" type link would take you to the full video post (which could contain the full video embed along with other descriptive data about the video). You could even use the blog commenting feature to elicit visitor feedback about the video right on your site.
Here's a simplified presentation version of this idea with a radio podcasts blog page: https://www.justhereforthebeer.com/podcasts (this doesn't use a Pinterest masonry grid approach but you get the idea - the "Blog" page on that site does use a masonry grid presentation). The podcasts are of several different radio shows and these can be filtered using the blog sidebar radio show categories links. In your case, you are primarily interested in a one-to-one link of the video thumbnail to its full-video post (the category-filtered blog page might be of interest for your various video categories like "Attitude & ID" and "Creativity & Ideas"). There are several blog apps in the Weebly app store that provide ways to present the default Weebly blog page with grid stylization and can echo "above the fold" post content (which, in your case, should not include the video itself) to a main library page).
You might want to consider employing a mega menu or even just using a simple, static page to house some of your menu content (granted, this will require manual updating of page links if you add more static pages to your site). Navigation can be challenging when you go much past the child menu items (the first drop-down items below the parent menu items you see directly in the navigation menu bar). Having lots of grandchild and great grandchild menu items can be a frustrating way for visitors to move around a site. You're better off having a page with a tabular grid of links that, at a glance, will give the visitor a pretty good idea of what's on the site. You can use accordion-style collapsers (like your in-page sidebar sub-navigators) to help keep the menu lists reasonably manageable.
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi Paul
Thanks for your incredible advice and I agree with absolutely everything you say and have thought that way myself for a while - the mega menu, simplifying navigation and primarily filtering, which only a blog can do.
I have to categorise everything manually as obviously there are no filtering options in standard pages and I have always wanted it to be filtered, blog-style but never liked Weebly's blog templates and the site is a beast in terms of the volume of content so it has always seemed way too much of a task to understake.
I hear what you are saying - I need to have a good think about this.
I will take a look through the App store to see what options I would have if I went full blog; I have always liked the basic template I currently use but the blog is very basic and the filtering/category boxes are TERRIBLE which is a big deterrent to switching to it.
If I can find a decent blog template I like which I can customise so it looks really good then I will definitely give this serious thought.
Thank you again - you are an absolute legend for going to so much effort with your assessment. I really appreciate it.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Paul
Are you available for hire out of interest? I don't need the whole job doing but if I do a big change, some help getting started might be good and it sounds like you know what you are talking about.
Is it OK to send me a link to your site or email so I can get in touch if I take the leap?
Thanks again
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@Re-Made Take a look at the Bloggons app (just $15):
https://www.weebly.com/app-center/bloggons?ref=ac-search
This app is probably closest to what you're looking for in terms of flexibility of blog post presentation. I agree that you don't want to use the default Weebly blog page sidebar category links as this, while completely functional, doesn't work with your overall site design. Remember that you can always link to blog posts or blog categories with your own custom links (text, image) so you can entirely turn off the blog page sidebar (the switch is in the blog settings) and keep the blog page styled more like your site's magazine pages with the masonry grid content layout.
The Bloggons add on has the additional feature of exposing "recent posts" (up to the most recent 25) to any page on your site which is a nice feature common on more heavy-duty blogging platforms like WordPress. That's a nice way for long-time visitors to be shown new material added to your large site without having to delve several layers in to find it (introductory snippets for your 10 most recent video posts for example would automatically appear on your home page or other page(s) of your choice via the Bloggons add on after you add the video posts to your blog).
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Thanks Paul
I have tried to PM you but keep getting failure messages but thanks for the email and the Bloggons App suggestion (I use it already on my home page/in the blog so will think about using it more). Thanks also for the links you sent and I will definitely check them out
🙂