VideoPress poster image is distorted/incorrect size

• 

  contactability · Member · Mar 21, 2013 at 9:24 am

  • Copy link
  • Add topic to favorites

  I have a video on this site (http://www.contactability.com.au/visa-small-business-awards/) using VideoPress which work fine but the size of the poster image (the still screenshot that is displayed before the video is played) is very poor quality. It appears that the poster image is being created as 400×224 and is then it’s condensed horizontally and stretched vertically to fit the video size which automatically appears at 545 x 306 px. There is black section appearing down the side. How do we get the poster image created in the full size that we need?

  I’ve tried reloading the video and using the default thumbnail but nothing works.

  There is a thread here about the same issue which looks like it was never really resolved – https://en.forums.wordpress.com/topic/videopress-poster-image-is-distortedincorrect-size?replies=2

• 

  helper-heroponriki · Member · Mar 21, 2013 at 7:30 pm

  • Copy link

  Hi there!

  Can you try to capture a new thumbnail for the video?

  Navigate to your individual video’s Edit Media screen (Media Library => click the title of the video of interest). Play a video, wait till you find a desirable frame, then click “Capture Thumbnail” button. The video will pause and display “uploading…”. Then it will display “Thumbnail saved”. Click the “OK” button and your thumbnail image (also known as a poster frame) is updated automatically.

  Let me know if you still have trouble.

• 

  contactability · Member · Mar 21, 2013 at 10:08 pm

  • Copy link

  II had already done that several times and it doesn’t work.

  Any other ideas?

  Thanks

• 

  helper-heroponriki · Member · Mar 22, 2013 at 2:23 pm

  • Copy link

  I downloaded and uploaded the video on a test site and the video thumbnail works fine for me:
  http://d.pr/i/pi2u

  I took a look at your site’s code and there’s a bit of CSS that is making the max-width of your thumbnail image to be 90% of the container width:

  #content img {
height: auto;
max-width: 90%;
width: auto;

  You would need to contact your site’s designer and have them either modify the max-width element to 100% or add this bit of code to the bottom of the CSS file to override this:

  img.videopress-poster {
max-width: 100% !important;
}

  That will fix the thumbnail issue.

  Let me know if you have any questions.

• 

  contactability · Member · Mar 22, 2013 at 10:20 pm

  • Copy link

  Thanks so much, that would have been the problem in the support ticket earlier that I referenced.

  The default wordpress themes must all include a percentage max-width for content images, I was busy looking in the VideoPress code/css for the answer.

  I’m sure this will help many people in future.

  Thanks again.

• 

  helper-heroponriki · Member · Mar 23, 2013 at 2:02 pm

  • Copy link

  You’re welcome! Glad I could help. :)