Responsive video lightbox for WordPress

[Deaf_Guy]

Hello - we just edited some of the pages of the company site. I used DW to do it locally. I know this is a WordPress site and I know there are literally a million plugins for WP but sometimes it's just easier to code something and be done with it.

For example, you can go to the link below and see how I added a simple popup when you point at the FREE SAMPLE text:

[Spam link removed by moderator as per forum guidelines.]

I've been making a lot of product video ads and we now want to add them onto the product page. I like that lightbox effect where if you click an image or text a lightbox opens and there is the YouTube hosted video about the product. I've not had any luck finding one that is especially responsive so the video in the lightbox shrinks on mobile devices and I don't want to go through a million WP plugins.

Does anyone have a good resource for a lightbox effect like I'm speaking of?

I'd love to be able to get the video thumb in the gallery and then when you click it, it lightboxes and there's the video like AMZ does:

https://www.amazon.com/Tripod-Tripods-Photography-Professional-Compatible/dp/B0B56CBRZY/ref=sr_1_5?k...

[Nancy OShea]

Yeah, that plugin is full featured with lots of options for various use cases. 

But the underlying code makes me want to vomit.

By @osgood_

========

Not looking at code is the whole point of using a CMS. 🙂

WP Themes + WP plugins = site functionality.

Fast, cheap & easy.

Rogue users who don't work with the Dashboard as intended should carefully weigh the pros & cons of what they're doing: 

1. There's high risk potential for breaking the site (conflicting scripts, poor code, malware, etc...)

2. Modifications can't be undone by site owners / employees  unless you also modify the dashboard & add controls for it.

3. The site could take unwanted hits to security, performance, taxonomy & SEO.

4. There's probably a built-in Theme "class" for what you want and if there isn't, there's a plugin. 

I urge whoever is thinking of modifying WordPress to do so in consultation with the site's developers, owners & stakeholders.

[osgood_]

Yeah, that plugin is full featured with lots of options for various use cases. 

But the underlying code makes me want to vomit.

By @osgood_

========

Not looking at code is the whole point of using a CMS. 🙂

WP Themes + WP plugins = site functionality.

Fast, cheap & easy.

By @Nancy OShea

Unfortunately, yes, that is the case, what you're supposed not to regularly see, doesn't really matter. I can't be associated with that kind of workflow, really it's just fooling everyone, including the developer, in pursuit mostly of quick financial gain, rather than professional integrity. That is the way of the World these days though, so while l accept these poor practices are far more common than not, l dont have to be part of it or try to defend what is mostly crap, in my opinion.

[Nancy OShea]

I've had more than my share of "good intentioned non-coders" breaking sites because they found a copy & paste solution or free widget somewhere.  A CMS helps guard against such misguided practices but it doesn't always prevent them.

As I said above, the site Theme's CSS probably has a built-in "modal" as most WP themes are built with Bootstrap.  @Deaf_Guy should start at the Theme. 

https://getbootstrap.com/docs/4.6/components/modal/

If the Theme doesn't have it, there are plenty of plugins for modal pop-ups.

[osgood_]

I've had more than my share of "good intentioned non-coders" breaking sites because they found a copy & paste solution or free widget somewhere. 

By @Nancy OShea

But OP is NOT a non-coder. They have a certain amount of understanding and are more than likely capable of introducing some simple code into the mix without breaking a website. If they are sensible they will make some kind of backup before performing such a task, unlike dopey clients who may well go into the WP admin space and start clicking on everything they can find. Last time I looked at WP, many moons ago now, I striped everything out of the admin UI or at the very least 'hid' the multitude of items I thought could cause an earthquake, trying to limit the damage that could be potentially caused, should I have chosen to go down the WP route, which eventually I didnt.

I still believe that the management of a website is best left in the hands of those with the skill to build them as pretty much all CMS's out there are open to clients messing the website up in a few seconds unless you more or less bolt everything down and that means building a very specific and expensive bespoke solution. If you have a professional website which makes money and update it regularly then you can afford to pay or even employ someone full-time dedicated to managing it. If a website is only updated 2 or 3 times a year, as most of my current and past clients do/did, then they can afford to employ me as and when the updates are needed. Its dangerous to deploy a default CMS and leave that in the hands of an 'uneducated' client and not cost effective to build a bespoke one, when very few updates are required, that can limit the damage the client could cause.

Fortunately these days I'm not involved any longer as it became a bit problematical and a meaningless task to me to hand over a well planned and carefully thought out website to someone who didnt share my passion. Yes I still update a few websites that are under my control NOT the clients. Its really rather like the plumber letting me have access to his toolbag, I would do a crap job, flood the house in seconds, so I leave skilled jobs to those that are experienced and it would be wise of clients that have websites to do the same, in my opinion.

Its not my problem any longer, I no longer feel under-valued! 

[Nancy OShea]

But OP is NOT a non-coder.

By @osgood_

========

That is your assumption, not mine.

[osgood_]

But OP is NOT a non-coder.

By @osgood_

========

That is your assumption, not mine.

By @Nancy OShea

It's not my assumption the OP has already stated they have been able to introduce code into their current WP website and even provided an example of that until some bystander decided the link was spam, which it wasnt.  To me that signifies the OP does have some understanding of code and the ability to deploy it, how much I don't know of course but to infer that they are clueless.............. 

[Nancy OShea]

It's not my assumption the OP has already stated they have been able to introduce code into their current WP website

By @osgood_

=========

I mean no disrespect to anyone.  Just calling it as I see it based on experience with Muse users who think code is a vulgar 4-letter word. 

There are just two types of WordPress users.

1. Developers who customize the WP code base to fit the client's needs, prior to deployement.

2. Hired help who add content to the company site from the CMS dashboard, alone or with aid from drop-in plugins like Elementor, WooCommerce, etc...

At no point should hired help be working directly with WP code. There's no need to. That's what the CMS is for. 

Just 'cuz you can do something doesn't mean you should do it.

[osgood_]

It's not my assumption the OP has already stated they have been able to introduce code into their current WP website

By @osgood_

=========

I mean no disrespect to anyone.  Just calling it as I see it based on experience with Muse users who think code is a vulgar 4-letter word. 

There are just two types of WordPress users.

1. Developers who customize the WP code base to fit the client's needs, prior to deployement.

2. Hired help who add content to the company site from the CMS dashboard, alone or with aid from drop-in plugins like Elementor, WooCommerce, etc...

At no point should hired help be working directly with WP code. There's no need to. That's what the CMS is for. 

Just 'cuz you can do something doesn't mean you should do it.

By @Nancy OShea

That may be the case in some situations of course, if you don't have any skill or knowledge. However, if you do then l think it's a case of take the easiest way possible to add what you need to the website, particularly in situations where the website is managed by the developer and they don't have to take the client into consideration when changes are made, which always involves a lot more work so the editing is fool proof. 

I have to believe, from the OPs original post, they have the required knowledge to add a simple component without jumping through hoops by creating some kind of UI widget in WP as outlined in a couple of links posted here. I can see no point in further complicating workflows providing you are managing the website and posses the skills needed to execute the procedure. Actually it even states in the links posted about creating a WP component widget that you can just add the component manually into the website but then the tutorial doesn't address how you do that it goes on to inform about creating a UI widget/block to do the job, sometimes l think its just too easy, many developers prefer to address more complex solutions, to pretend its way more difficult than it actually is or has to be.

To be honest apart from handing down a web component to a less capable developer l've yet to uncover where and when a web component can bring anything to the party. It saves a few lines of html at most but the verbose nature of how it's created probably has most developers running for the hills, both issues are probably why web components haven't become that popular, because their use appears to be fairly limited to team work where you would find different levels of experience.

[osgood_]

Spam?????? OP was just providing an example of the popup they deployed on their website.........how is that spam....hummm

[Deaf_Guy]

Wow, you're right. Went back to my original post on here and the link to the page was removed. Just trying to show the actual page and what I wanted to do with it. Sheesh ha.

BTW - here's another thing that's annoying - one of your WP links was great - a great-looking modal that would open to the video and responsive. But then you have to pay for the "pro" version $29/year to use it. Ugh.

[osgood_]

BTW - here's another thing that's annoying - one of your WP links was great - a great-looking modal that would open to the video and responsive. But then you have to pay for the "pro" version $29/year to use it. Ugh.

By @Deaf_Guy

I haven't read the ins and outs but does that fee of 29 dollars a year extend to usage across multiple websites or does it only cover usage on one website.

If its just licensed to the one website then the costs could soon mount up supposing you had the requirement to use 5 paid for plugins and a dozen websites to manage.

Then if you use the free stuff it's not usually that we'll coded or documented and quite possibly abandoned by the developer which then may become incompatible with future versions of WP.

[Deaf_Guy]

Exactly. Which is why I came here hoping someone could just help me with a "hand-coded" modal that I can drop into the site. I've already dropped in other stuff [like the popup text in my original post way up at the top, but now the link is gone so you can't see it] and it works great. Oh well.

[osgood_]

Exactly. Which is why I came here hoping someone could just help me with a "hand-coded" modal that I can drop into the site.

By @Deaf_Guy

I could if you want to give it a go but you seemed intent on searching for a WP plugin in, how's that going, any success apart from the paid for one?

[B i r n o u]

If you decide not to go down the WP plugin route post back and l'll code up a javascript web component which you can deploy using a link to the javascript file and inserting a simple custom tag into your page/s where you want the lightbox/video/s to appear No duplicated html is required this approach just uses instances of the same code which keeps it all nice and clean unlike the bloated mess that WP is likely to spit out.

By @osgood_

To be honest apart from handing down a web component to a less capable developer l've yet to uncover where and when a web component can bring anything to the party. It saves a few lines of html at most but the verbose nature of how it's created probably has most developers running for the hills, both issues are probably why web components haven't become that popular, because their use appears to be fairly limited to team work where you would find different levels of experience.

By @osgood_

so what do we do?... plugin... web component... rip open the hood and inject infused HTML ????

[Deaf_Guy · Accepted solution]

Thanks for all of the replies. I'd like to close this. I solved the issue. To recap for others:

I tried the plugin route. They required you to pay a fee for the advanced version of what I wanted to do. This is why I don't like WordPress, but I'm forced to use it because that's what the company has. There's talk that the website will be revamped in a couple of years. If I'm around, I plan to strongly recommend that WP NOT be used.

I found some code online. It was pretty easy to use - just have to add a script file link and CSS in the header, then another piece of script at the bottom of the page.

Made an icon, then tested everything on a local web page using Dreamweaver. Worked great.

Had to download another WP plugin [surprise, surprise] that allows you to add code in headers, footers, and the body. I downloaded this app, but guess what? When I tried to add the code only to a page I wanted to, got a message "You can't do that and need to buy the pro version." So I just installed everything globally.

Added the code, added the icon on the page, published and it works great.

Just wanted to close with this - I've been a member here for almost 20 years. Have always been grateful for the help I've gotten on here. But try to remember something - in the final analysis, the browser doesn't care where the code comes from - it just reads it. Put another way, as long as you know what you're doing, there's no real "wrong" way to do things.

I remember getting a little grief on another thread I started when I was using Muse. I was creating little "apps" with it, then iframing them onto a SharePoint web page. "Oh you should never do that..." blah blah blah is what I heard from some members on here. But you know what? It worked beautifully and still does to this day. So again, as long as it works, that's all that matters.

[osgood_]

---

@B i r n o u wrote:

If you decide not to go down the WP plugin route post back and l'll code up a javascript web component which you can deploy using a link to the javascript file and inserting a simple custom tag into your page/s where you want the lightbox/video/s to appear No duplicated html is required this approach just uses instances of the same code which keeps it all nice and clean unlike the bloated mess that WP is likely to spit out.

By @osgood_

To be honest apart from handing down a web component to a less capable developer l've yet to uncover where and when a web component can bring anything to the party. It saves a few lines of html at most but the verbose nature of how it's created probably has most developers running for the hills, both issues are probably why web components haven't become that popular, because their use appears to be fairly limited to team work where you would find different levels of experience.

By @osgood_

so what do we do?... plugin... web component... rip open the hood and inject infused HTML ????

---

I was just trying to think as a freelance developer where web components would fit into my workflow and be beneficial and l cant find a convincing answer at the moment, apart from they may be a trend or make me feel l was doing something superior to the crowd, both aren't good enough reasons. Yes l can see they may be useful in a situation where a senior developer in a team was handing down a component to a junior developer who then really only needs to add some attributes rather than get involved with any coding.

Same as lm currently trying to get my head around why l would use Astro which seems to be gaining some traction because it only does what can be done without it anyway. Is the overhead of all the dependencies and build processes really worth considering it, l guess if youre not very good at coding then yes. But that's what it seems to have come down to these days, developers who are not very good at it and have to resort to third part solution to hold their hand.

[B i r n o u]

vast debate... we need beers... a pool table... long evenings