• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
2

Responsive video lightbox for WordPress

Enthusiast ,
May 31, 2023 May 31, 2023

Copy link to clipboard

Copied

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...

TOPICS
Other

Views

1.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Enthusiast , Jun 09, 2023 Jun 09, 2023

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 a

...

Votes

Translate

Translate
Community Expert ,
May 31, 2023 May 31, 2023

Copy link to clipboard

Copied

Editing a WordPress site with Dreamweaver is possible but not recommended. WordPress sites are dynamic and rely on server-side code and online databases, which are not compatible with Dreamweaver's static web page editing. To edit WordPress files in Dreamweaver, you need to install a WordPress plugin and import the WordPress files as a project. However, this may not reflect the actual appearance and functionality of the WordPress site. It is better to use the online admin panel to maintain a WordPress site.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 31, 2023 May 31, 2023

Copy link to clipboard

Copied

I agree 100% with @BenPleysier , it's not advisable to make hard modifications to Wordpress code.

 

For this, there are various approaches that are preferable: home-made dedicated plugins, child template and/or functions.php file, code embed or snippet plugins... in short, there's no shortage of solutions.

 

For your more specific video needs, there are a number of plugins available out there, but the final choice will most depend on the features you're looking for... take a look at WP Video Lightbox, Responsive Lightbox & Gallery (with its surprising lightbox effects), WP Video Popup... to name just a few that come to mind...

 

just out of curiosity, what's so embarrassing about the use of plugins, which is the architectural basis of WP's operation?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

OK thanks. I'll check those plugins out.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 31, 2023 May 31, 2023

Copy link to clipboard

Copied

Is your website hosting the videos or are you pulling the videos into your website from the youtube website once a thumbnail image is clicked? The downside to pulling in the videos from the youtube website is they usually come with adverts that your customers probably won't want to watch.

 

Are you creating a gallery of videos or are these just single videos which appear on product pages as an addition to the written information about the product

 

This should be pretty simple to code as an individual component but l have no idea about WP, that has its own eco system, one which l dont care to explore myself. If you have added code to your WordPress website before, outside of the Wordpress environment, which your post suggests, then you should be able to add the code needed for your current requirements, maybe that's the way you prefer to go for whatever reason.

 

There doesn't have to be anything dynamic about this at all in terms of storing anything in databases.

 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

Yes, the videos are on YouTube, made by us.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

That's very nice of you, thank you. I'm going to try the plugin route first. Fingers crossed.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

That's very nice of you, thank you. I'm going to try the plugin route first. Fingers crossed.


By @Deaf_Guy

 

Give it a go as it's a WP based site.............what you don't see much (the code) l guess doesn't really matter so long as it works.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

either if @Deaf_Guy is not interested, could you please count me in... I'm interested to learn how to implement web component in WP without using an home made plugin, or without cannibalizing functions.php throught the child template.

please, believe me,
I'm not being ironic or teasing, I'm genuinely curious with an appetite for learning.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

I've always thought WP was a hodge-podge. I mean there are literally hundreds of plugins out there but you never see an example of how it actually functions, so you really don't know what you will get. But I'm going to see if I can find one to meet my needs.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

well , first of all I'm not sailing anything, just trying to explain how to use and preview a plugin...


many way...

 

First of all... directly from the extension's page in within WP, you can check for plugin typing for exemple Video in the search field, and you'll get plenty plugin...

Birnou_0-1685638703686.png

Now each plugin offer you a get details link... and from there you'll be in order to investigate...

 

but you also have the way to use a web search engine to locate a WP Plug in, or directly from the https://wordpress.org/plugins/ web site... all the plugin published there are some how confirmed...


So take the example I gave you in a previous comment ... WP Video Popup
WP Video Popup gives https://wordpress.org/plugins/responsive-youtube-vimeo-popup/
from there you can get the developer web site https://wp-video-popup.com/

and you can get video, and plenty information on what you get, how to configure, set, use, and so on.

 

then once you got more or less what you could expect... you still have youtube that will shows you more and more tutorial, about https://www.youtube.com/results?search_query=WP+Video+Popup

 

but I agree that some times not...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

either if @Deaf_Guy is not interested, could you please count me in... I'm interested to learn how to implement web component in WP without using an home made plugin, or without cannibalizing functions.php throught the child template.

please, believe me,
I'm not being ironic or teasing, I'm genuinely curious with an appetite for learning.

 


By @B i r n o u

 

Does WP allow you to include your own links to javascript files and insert custom tags into its html code? I assume it's flexible enough to be able to give you that option?

 

Basically it will be a javascript file including an html template which creates a custom tag. All you then do is link that to the page and insert the custom tag into the html code. You can insert as many instances of the custom tag as required. 

 

Does that sound doable in WP?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

Does WP allow you to include your own links to javascript files and insert custom tags into its html code? I assume it's flexible enough to be able to give you that option?

By @osgood_

 

Well, in fact there are two ways of proceeding, either the direct method, where you pull on the wire to disconnect the plug and turn off the lamp, or you add a switch...

 

WP's architecture is quite sophisticated, and pulling on the wire can produce a quick result, but over the long term, it's often a pain.

 

For my part, I prefer to install a switch, because maybe the customer will then want to add a dimmer, or a sound sensor to control switching on, or interfere with the blinds... etc...

 

So to add a switch from within WP... we have the choice of either

  • creating a child template that will offer supplements to the current template
  • or create a custom plugin that will achieve the same results but be independent of the template...
  • or use a plugin or template that lets you add custom code page by page (links, snippets, etc...), but that's just for sporadic troubleshooting...

 

that's why I asked the question, to learn and explore other avenues... so far, John Rhea's approach is quite didactic https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/ if you want to get the idea on how I implement new features on WP

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote
quote
  •  

 

that's why I asked the question, to learn and explore other avenues... so far, John Rhea's approach is quite didactic https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/ if you want to get the idea on how I implement new features on WP


By @B i r n o u

 

Probably why I avoid WP.  That all reads like its OTT - 'Over The Top' just to include a web-component. That's some kind of what the author calls a 'web-component' but is not a javascript web-component using the shadow dom. What we are talking about are as different as chalk and cheese.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

That's some kind of what the author calls a 'web-component' but is not a javascript web-component using the shadow dom. What we are talking about are as different as chalk and cheese.

By @osgood_

 

What ever you include, that just demonstrate how to include and qeueing script, css, snippet of code... and so on without loosing the editing part of the WP admin interface.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote
quote

That's some kind of what the author calls a 'web-component' but is not a javascript web-component using the shadow dom. What we are talking about are as different as chalk and cheese.

By @osgood_

 

What ever you include, that just demonstrate how to include and qeueing script, css, snippet of code... and so on without loosing the editing part of the WP admin interface.


By @B i r n o u

 

I dont know WP so maybe whatever its doing does something that is required where a client editing the website gets involved.  I'm more coming at it from the angle where a knowledgable developer manages the website and the client doesnt get involved. If a client doesnt get involved in the editing there's no need for complicated solutions. I mean what sh*te is going on these days, some developers like to over complicate even the simplest of processes, for reasons I've yet to discover.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

I'm more coming at it from the angle where a knowledgable developer manages the website and the client doesnt get involved. If a client doesnt get involved in the editing there's no need for complicated solutions.

By @osgood_

 

client or not, when it comes to adding and managing content, i.e. the content itself, but also the layout and responsive aspect... all this needs to be kept out of the code, so that we can concentrate solely on content, layout and design... ignoring the rest

 

That's why, once the WP settings have been made... I mean all the global configurations, including WP, template, plugins, editor and builder... then we can just concentrate on the content,

 

today, middleware such as Fusion Page Builder, Elementor, King Composer, Beaver Builder, and others... are helping us a lot to improve the integrator experience... which is becoming an undeniable added value and the prerogative of demanding developers.

 

Basically, the developer concentrates on the first parts to set up the build environment, all the structure, and the machine builder, then the template, plugins, and transversal management... then the customer directly, or the team integrator, concentrates on the content. ... and believe me... I mean it... it's so amazing and so comfortable to use that even as a developer, one quickly get into the swing of things and it's really fun to play with these kinds of tools and approaches... icing on the cake... once you get the hang of it... you can swap projects... nobody becomes indispensable, and everyone continues to work in tandem with each other... and simultaneously... we're really in object architecture and approches

 

but I understand that there are other approaches... too... and that everyone is different... that's why it's so cool

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote
quote

I'm more coming at it from the angle where a knowledgable developer manages the website and the client doesnt get involved. If a client doesnt get involved in the editing there's no need for complicated solutions.

By @osgood_

 

client or not, when it comes to adding and managing content, i.e. the content itself, but also the layout and responsive aspect... all this needs to be kept out of the code, so that we can concentrate solely on content, layout and design... ignoring the rest

 

That's why, once the WP settings have been made... I mean all the global configurations, including WP, template, plugins, editor and builder... then we can just concentrate on the content,

 

today, middleware such as Fusion Page Builder, Elementor, King Composer, Beaver Builder, and others... are helping us a lot to improve the integrator experience... which is becoming an undeniable added value and the prerogative of demanding developers.

 

Basically, the developer concentrates on the first parts to set up the build environment, all the structure, and the machine builder, then the template, plugins, and transversal management... then the customer directly, or the team integrator, concentrates on the content. ... and believe me... I mean it... it's so amazing and so comfortable to use that even as a developer, one quickly get into the swing of things and it's really fun to play with these kinds of tools and approaches... icing on the cake... once you get the hang of it... you can swap projects... nobody becomes indispensable, and everyone continues to work in tandem with each other... and simultaneously... we're really in object architecture and approches

 

but I understand that there are other approaches... too... and that everyone is different... that's why it's so cool

 


By @B i r n o u

 

It might be amazing to you but its bordering on junk to me. Show me a WP website and I'll show you junk code......but as you say each to his or her own. I really dont relate to being a developer if I'm just deploying something mostly written by someone else, third party plugins, libraries etc or I have bundles of files in my work folder which I have no idea what they do. There's zero job satifaction in that, to me at least, you could train a monkey to use that kind of workflow. I'd rather be doing something else, more individual, rather than be a lemming.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 02, 2023 Jun 02, 2023

Copy link to clipboard

Copied

quote

Does WP allow you to include your own links to javascript files and insert custom tags into its html code? I assume it's flexible enough to be able to give you that option?

 

Basically it will be a javascript file including an html template which creates a custom tag. All you then do is link that to the page and insert the custom tag into the html code. You can insert as many instances of the custom tag as required. 

 

Does that sound doable in WP?


By @osgood_

 

@osgood_ , I think that you may be on the right track here, Have a look at Using Web Components in WP

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 02, 2023 Jun 02, 2023

Copy link to clipboard

Copied

quote
quote

@osgood_ , I think that you may be on the right track here, Have a look at Using Web Components in WP

 


By @BenPleysier

 

Same link as Birnou posted although l think that is creating some kind of UI editable component block in the WP admin panel, if you want go through that process to allow a non coder to manipulate the web component without knowing any coding.

 

I haven't used WP in years so don't know what it allows you to do in the way of introducing bespoke code directly via the html view by someone who is a coder or has some coding knowledge.

 

I would imagine it can be done and if so would circum-navigate the need to create a  block in the administration UI which appears to me at least to be a lot more work than just adding a link to a script and a custom tag directly into the code itself.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

OK thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

Not a Dreamweaver question but try this all-in-one Video Gallery plugin for WP. 

https://wordpress.org/plugins/all-in-one-video-gallery/

Demos: https://demo.plugins360.com/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

Thank you but we don't want a gallery. I could easily do that myself with simple coding. We want a modal type that opens and there's the video and needs to be responsive too. I do as always appreciate your help on here though.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

Thank you but we don't want a gallery. I could easily do that myself with simple coding. We want a modal type that opens and there's the video and needs to be responsive too. I do as always appreciate your help on here though.


By @Deaf_Guy

 

There is a modal type :

 

https://demo.plugins360.com/automatic-youtube-gallery/theme-popup/ 

 

But the underlying code makes me want to vomit.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines