-
AuthorPosts
-
August 5, 2015 at 6:57 pm #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.
August 6, 2015 at 9:49 am #483754Hey bibbitybop,
Could you provide us with a link to the site in question so that we can take a closer look please?
Regards,
RikardAugust 7, 2015 at 8:50 pm #484687August 10, 2015 at 11:06 am #485153Hi!
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,
AndyAugust 10, 2015 at 2:36 pm #485339The 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.
August 10, 2015 at 2:38 pm #485341Hi!
can you show us about which video and thumbnail you are talking about? then we could try to do it for you.
Regards,
AndyAugust 10, 2015 at 3:32 pm #485387Yes, 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
August 11, 2015 at 4:54 am #485730Hi!
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,
JosueAugust 11, 2015 at 7:54 pm #486143Thanks, 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
August 11, 2015 at 8:21 pm #486162Hi 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!
JosueAugust 11, 2015 at 8:47 pm #486184Thanks. 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
August 11, 2015 at 9:49 pm #486201Hey!
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,
JosueAugust 12, 2015 at 1:55 am #486261Got it. Thanks ! – Joe
August 12, 2015 at 4:04 am #486282You are welcome Joe, glad to help :)
Regards,
Josue -
AuthorPosts
- The topic ‘Getting a Video to Popup in a lightbox’ is closed to new replies.