[Nabeel AModerator]

Hi again,

I went ahead and added the following code:

jQuery(window).load(function() {
  	jQuery('body').on('click', '.mejs-overlay-play', function() {
  		jQuery(this).parents('.x-video.player').addClass('hide-icon');
   	});
});

And it’s working fine now. Please clear your browser’s cache and check the page again.

Cheers!

[Piranhabar_webParticipant]

Hi Nabeel,

Amazing! Thanks sooo much to you and the team, I appreciated this so much!

[Paul RModerator]

You’re welcome! 🙂

[Piranhabar_webParticipant]

Hi guys,

One last thing on this, is it possible to make the image itself clickable also (see attached image for reference),

I’ve found that the image graphic is ‘blocking’ the content behind it from being clicked,

Many thanks,

Barry

[Rue NelModerator]

Hey Barry,

Thanks for updating in! To resolve your issue, please make use of this custom css instead:

.mejs-video .mejs-layer {
    background-image: url(http://2016testing.piranhabar.ie/wordpress/wp-content/uploads/2017/03/PB_Play_pink.svg);
    background-position: center center;
    background-repeat: no-repeat !important;
    background-size: 100px;
}

.x-video-icon:before {
    display: none;
}

This should add the background image to the clickable area and remove the old play icon.

Hope this helps. Kindly let us know.

[Piranhabar_webParticipant]

Hi Rue Nel,

Thanks so much for this, exactly what I hoped for 🙂

Just one small thing, when I’m playing a video now and then pause the video, I can’t continue on playing as the screen is stuck (as in the video is frozen in the div.). It feels like something is covering it from being clicked.

Does this make sense?

Cheers

Barry

[RadModerator]

Hi there,

It seems to be okay, I can play it after pausing it. Is it specific to a video? What device you’re testing it with?

Thanks!

[Piranhabar_webParticipant]

This reply has been marked as private.

[Piranhabar_webParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hey Barry,

Thanks for updating in! I have tested the page and I can confirm that it is somehow block and you cannot play again the video after you have paused it. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.hide-icon .mejs-video .mejs-layer {
    display: none !important;
}

Please let us know if this works out for you.

[Piranhabar_webParticipant]

Hi Rue Nel,

Amazing, works perfectly, thanks so much!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts