Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #483530

    I have an mp4 video, I want to show as a thumbnail (generated by Enfold), when the user clicks on it it pops up in a Lightbox.

    I’ve read through the forums here on how to do this and have tried a number of approaches still can’t get it quite to work correctly. I either get the Lightbox to work but no thumbnail…. OR I have a thumbnail but can’t get it to open in a Lightbox.

    Here is what I have tried and the results;

    Approach 1: (Video Element)
    When I use a “Video Element” and add the URL “http://myurl/myfile.mp4”, the thumbnail shows up, but when you click on it, it doesn’t show a Lightbox.

    Approach 2: (Video Element with iframe=true)
    When I do the same as above, but change the URL to “http://myrul/myfie.mp4?iframe=true” , the thumbnail disappears and it only shows the link, but it does open in a Lightbox, when you click on it.

    Approach 3: (Image Element, setting link to URL manually)
    When I add an Image Element and set the URL to open the video, the Lightbox opens correctly but because I’m using the image element, there is no thumbnail.

    Any suggestions ? Thanks !

    • This topic was modified 9 years, 4 months ago by bibbitybop.
    #483754

    Hey bibbitybop,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    #484687

    Sent

    #485153

    Hi!

    Use this as an example:

    <a title="Despicable Me" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Despicable Me" width="50" /></a>
    

    and put in your settings.

    Fore more information about lightbox settings see this: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone

    Regards,
    Andy

    #485339

    The code you posted doesn’t work for me. It doesn’t show the thumbnail and when I click on it, it says “Image could not be loaded”.

    Let me restate, I just want to put a video, that shows a thumbnail, when the user clicks on it, it opens into a larger size so they can view it.
    Is there no simple way to do this ? What is the solution ?

    Please advise.

    #485341

    Hi!

    can you show us about which video and thumbnail you are talking about? then we could try to do it for you.

    Regards,
    Andy

    #485387

    Yes, Andy. I posted the link to the page and the login info in the private section. Once you are on the page, scroll down to the “Training Videos” section. It’s just one video. Please let me know if you have any questions.

    Thanks – Joe

    #485730

    Hi!

    You’d need to use the 3rd approach (Image element) and set the thumbnail manually as the Image element, there’s no way in Enfold to auto-generated a thumbnail for self-hosted videos.

    Regards,
    Josue

    #486143

    Thanks, that makes sense for self-hosted videos.

    However, I also used the 3rd approach (image element) to link to a Youtube Video. I used the long URL and the short URL, but the image did not show a thumbnail in either case. Should the thumbnails show up when linking to youtube videos ?

    Thanks – Joe

    #486162

    Hi Joe!

    The image element just pulls static images uploaded to the Media library, there’s no way for it to detect that it is being linked to a YT video and change its image accordingly.

    However, as you are using YouTube videos we could make use of the already YouTube-generated thumbnail, try using a Text Block / Code Block element with a code like this for your videos:

    <a href='http://www.youtube.com/watch?v=YOUTUBE_CODE_HERE'><img src=' https://i.ytimg.com/vi/YOUTUBE_CODE_HERE/hqdefault.jpg'></a>
    

    Cheers!
    Josue

    #486184

    Thanks. I tried the code, but I must be doing something wrong. I dragged a Text Block, clicked on the “Text” tab, pasted your code and replaced YOUTUBE_CODE_HERE with the long URL of the video. Saved it, updated etc. There is no thumbnail, but the video pops up. I pasted the code below as taken from the text block after saving it. Do I have a syntax error somewhere ? Doesn’t work for me for some reason. Thanks Joe

    #486201

    Hey!

    Should be like this:

    <a href='http://www.youtube.com/watch?v=tHX2BM2NV0Q'><img src=' https://i.ytimg.com/vi/tHX2BM2NV0Q/hqdefault.jpg'></a>
    

    “YOUTUBE_CODE_HERE” would be “tHX2BM2NV0Q”.

    Best regards,
    Josue

    #486261

    Got it. Thanks ! – Joe

    #486282

    You are welcome Joe, glad to help :)

    Regards,
    Josue

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Getting a Video to Popup in a lightbox’ is closed to new replies.