Poster image in Video player stays on

Hi,

I have added a poster to a video:

However, when the video is played that image stays on top of the video whereas I was under the assumption that the image would disappear once the video is started:

What causes this?

The URL: https://www.zentire.nl

Hi there,

Thanks for writing in.

It doesn’t display a poster image on my end.

What browser you’re testing it with? Is it a hybrid device?

Thanks!

Sorry, removed it. It’s on now until tomorrow.

Hi there,

Please go to the Video element and add the normal Youtube link of the video and not the part of the embed code including allowfullscreen. Also Please go to the embed tab and remove any code that you might have there in the Video element options.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Hi,

Followed the steps mentioned but no change.

Hi yingfuli,

I’ve checked your website and I can reproduce this issue, I’ve logged it to our dev team for further investigation. For now you can add this JS snippet to (X > Theme Options > JS):

jQuery(window).load(function(){
  jQuery('.mejs-playpause-button button').click(function() {
      jQuery('video.x-mejs').removeAttr('poster');
    });
});

This should hide the poster image when the video is played.

Thanks.

Okay, great, Thanks.

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

Hello,

I’m having the same problem using pro and adding the Javascript didn’t work when I click the poster image it doesn’t disappear, though it does if I pause the video. Here is the website link: (video about the 4th section down): http://20g.687.myftpupload.com/

@kinumedia, checked the video on my iPad and it works fine: the poster image disappears immediately when the video is played. Did you perhaps try to play the video while in the Pro PageBuilder? In my experience the video won’t work as it would on the front end.

This is what it looks like on my phone:

And it’s no longer showing the poster picture at all on the desktop for me.

I have the same on my iPhone but when you click ‘play’ it opens de video in a light box and it will play (though no poster image):

On iPad it just works as it should:

On iMac it also works fine:

Hi @kinumedia,

Thanks for writing around! I checked your site and I see the poster image in desktop screen (see screenshot)

You can try replacing the previous script with the following one:

jQuery(window).load(function(){
  jQuery('.mejs-overlay-play').click(function() {
      jQuery('video.x-mejs').removeAttr('poster');
    });
});

This should work as expected. Don’t forget to clear your browser’s cache after adding the code.

@yingfuli thank you for the help.

Cheers!

THANKS ALL! Worked like a charm.

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.