-
Posts
-
Hello,
I’m using the video element on my site, and I want to know how to display a thumbnail/poster before the video plays. Right now it just shows a black screen before the video starts, which might just be a screen capture of the very beginning of the video.
I tried using the image/link-to-video idea that I found in another thread to utilize a lightbox, but my self-hosted videos aren’t showing in a lightbox, but instead are taking over the screen.
So my questions would be:
1. How can I display a thumbnail or poster for a self hosted video that plays directly on the site, or
2. How do I get a lightbox to properly display for my self-hosted video, while also displaying a thumbnail/poster.Any help would be greatly appreciated. Love the theme.
Thanks,
Dave
What may be a possible and, perhaps, favorable solution would be to put your videos on YouTube. Set a custom thumbnail there and then install the Hide YouTube Related Videos plugin which blocks the mosaic tilework of related videos from appearing a the end of the video. Embed the YouTube link into your site via the video element.
You would save bandwidth on your hosted site. (and potentially $ if you go exceed limit) You could make the videos on YoutTube unlisted then just copy the URL to your site. Private won’t work as you have to have to be logged in to see the video. No one on YouTube could see the videos in your channel unless they knew the direct URL.
An idea to consider.
Thank you for the response. I would love to post these on YouTube, but they are licensed and we aren’t legally able to do so.
Any other ideas? :)
lol
Well. I’m sure none, including yourself, endorse or make a practice of utilizing copyrighted material.
If I were to have self-hosted video then, if I remember correctly, add it as a portfolio item. Use the preview image (For AJAX style) or feature image (for non AJAX) as the thumbnail. On a page you would add the portfolio element and select the category the video was assigned to.
I looked into doing prior to using YouTube and the way I did it for one of my sites so my notes may be a bit sketchy but I think it may help get you into the ballpark.
• A portfolio FEATURE image is 495 x 400 pixels (scales down to 276 x 352)
• Portfolio can have a video with and without gallery.
• No gallery images required if only a video
• Preview text only appears in AJAX (Slide up) configuration
• Excerpt text appears below portfolio module – required
• Add 2/3-1/3 layout element
o Video link in 2/3 container
o Text block in 1/3 container
• Add 1/1 layout element below (if wanting text content below)
• if you wish Add special heading (for article title)
• Add text block
• Add 1/1 layout
• Add commentsHope this gets you going the right way.
EDIT: Yup…poster parameter probably is the better way to go. There are many smarter people than I.
Hey!
You can use the ‘poster’ parameter in the video shortcode:
https://codex.wordpress.org/Video_ShortcodeBest regards,
JosueThanks Mediaman, great idea but unfortunately I can’t get the lightbox to work with my mp4 file.
Josue, I tried this but my videos aren’t playing now for some reason.
I tried the new code block element, but the shortcode isnt working. I tried the text element, but the code gets messed up going from visual to text.
Here is the code im using:
[video mp4="http:///media.crude.com/Educational Videos/3D Rig.mp4" webm="http://media.crude.com/Educational Videos/3D Rig.webm" poster="http://media.crude.com/Educational Videos/3D Rig.png"][/video]
Hi!
This file doesn’t exists:
http://media.crude.com/Educational%20Videos/3D%20Rig.pngAlso, have you tried with the new Code Block element? that way the code won’t get messed up.
Cheers!
JosueIm trying the following code block with the new code block element, and its just showing up as text on my site:
[video mp4="http://media.crude.com/Educational Videos/3D Rig.mp4" poster="http://www.crude.com/wp-content/uploads/2013/11/crude-energy-3d-rig-tour-thumb.jpg"][/video]
I try the same block in a text element, and nothing shows up.
Any other ways I can get this to pop up as a lightbox? What formats should be supported for this?
Hi!
I too noted the Code Block just returns the shortcode as text, however i tried using the exact same code in a simple Text Block and worked fine on my end:
Just make sure you are putting it while being in the Text tab.
Regards,
JosueThanks Josue! Does the video load for you when you try to play it? Its loading VERY slowly for me…if at all…
Hi!
I remember it did the first time i tried it, but yes now the loader keeps hanging, it seems to be an issue related to the location of the video because it even happened with the default WP theme:
Try it later or perform a test with another video.
Cheers!
JosueBack on this project. So I can get the video to play now, but autoplay=”off” still automatically plays the video in both advanced builder mode and on the webpage. Here’s the code Im using (inserting this into the Text tab of a Text Block Element:
[video mp4="http://www.crude.com/wp-content/uploads/2014/05/crude-energy-3d-rig-compressed.mp4" poster="http://www.crude.com/wp-content/uploads/2013/11/crude-energy-3d-rig-tour-thumb.jpg" preload="auto" autoplay="off" id="movie-id" controls="true" height="200" width="300"][/video]
Hey!
Autoplay default value is off, according to the Codex, have you tried removing that attribute? can you post a link to the Page where you have this video?
Best regards,
JosueThank you Josue! Removing the autoplay=”off” part fixed the autoplay issue :) I finally got this working properly!
- The topic ‘Video Thumbnails’ is closed to new replies.