Skip to main content
Deaf_Guy
Deaf_Guy
Inspiring
May 31, 2023
Answered

Responsive video lightbox for WordPress

  • May 31, 2023
  • 7 replies
  • 4671 views

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?keywords=tripod&qid=1685564631&sr=8-5&th=1

    This topic has been closed for replies.
    Correct answer Deaf_Guy

    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.

    7 replies

    B i r n o u
    B i r n o u
    Legend
    June 9, 2023
    quote
    quote

    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
    Deaf_GuyAuthorCorrect answer
    Inspiring
    June 9, 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 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.

    O
    osgood_
    Legend
    June 1, 2023

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

      Deaf_Guy
      Deaf_GuyAuthor
      Inspiring
      June 1, 2023

      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.

      O
      osgood_
      Legend
      June 2, 2023
      quote

      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.

       

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      June 1, 2023

      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
        Deaf_Guy
        Deaf_GuyAuthor
        Inspiring
        June 1, 2023

        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.

        O
        osgood_
        Legend
        June 1, 2023
        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.

          Deaf_Guy
          Deaf_GuyAuthor
          Inspiring
          June 1, 2023

          OK thanks.

          O
          osgood_
          Legend
          June 1, 2023

          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.

           

           

           

           

           

          Deaf_Guy
          Deaf_GuyAuthor
          Inspiring
          June 1, 2023

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

          O
          osgood_
          Legend
          June 1, 2023

          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.

          B i r n o u
          B i r n o u
          Legend
          June 1, 2023

          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?

            Deaf_Guy
            Deaf_GuyAuthor
            Inspiring
            June 1, 2023

            OK thanks. I'll check those plugins out.

            BenPleysier
            Community Expert
            BenPleysierCommunity Expert
            Community Expert
            June 1, 2023

            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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices