[Piranhabar_webParticipant]

Hi,

I’m wondering is it possible for me to add an x-icon play button over a video player poster image in cornerstone?

I’ve added this x-video-icon code to the css slot (css image attached), however it’s not working:

a.x-video-icon {
position:inherit;

}
a.x-video-icon:before {
content: “\f04b”;
position: absolute;
font-family: “FontAwesome”;
font-size: 150px;
top: calc(50% – 127px);
left: calc(50% – 58px);
color: rgba(255, 255, 255, 0.5);
}
a.x-video-icon:hover:before {
color: rgba(255, 255, 255, 1);
}

Any help would be greatly appreciated,

Cheers

[RadModerator]

Hi there,

Thanks for posting in.

Please provide the site’s URL that has this issue 🙂 , and if’s behind a coming soon page then please provide the login credentials as well.

Thanks!

[Piranhabar_webParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Upon checking, I can see it’s working.

https://www.screencast.com/t/OjPUozNV

Please clear your browser cache and check again.

Thanks

[Piranhabar_webParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please replace your code with this.

.x-video-icon {
    position:inherit;
}

.x-video-icon:before {
    content: "\f04b";
    position: absolute;
    font-family: “FontAwesome”;
    font-size: 150px;
    top: calc(50% – 127px);
    left: calc(50% – 58px);
    color: rgba(255, 255, 255, 0.5);
    z-index:999999;
}

.x-video-icon:hover:before {
    color: rgba(255, 255, 255, 1);
}

Hope that helps

[Piranhabar_webParticipant]

Thanks Paul,

This is great: http://2016testing.piranhabar.ie/wordpress/portfolio-item/aib-gaa/

On last thing though, how do I get the button to disappear, once clicked?

Cheers

Barry

[LelyModerator]

Hi Barry,

Add this JS script on Cornerstone > Settings Tab > Custom Javascript:

jQuery(document).ready(function($) {
  $('.mejs-overlay-play').click(function(e) {
  $(this).parent().parent().parent().parent().parent().addClass('no-after');
   });
  
});

Then add this CSS to on Cornerstone > Settings Tab > Custom CSS:

.x-video-icon.no-after:before {
    content: "" !important;
}

Hope this helps.

[Piranhabar_webParticipant]

Thanks Paul.

I’ve added these elements, however I’m afraid that it’s still not working. I’m wondering if I need to add (or take out) some of the java script or css tags maybe? (I’ve attached the javascript css for reference),

Cheers

[Piranhabar_webParticipant]

Hi guys,

Sorry to keep on bugging you on this one.

I’ve tried adding a .closet() value to the javascript code instead of the .parent().parent().parent().parent().parent(), however it didn’t work.

However I’m thinking that the javascript isn’t linking with the css properly as it doesn’t change when I set any differences (opacity, color etc).

Any more ideas on this would be greatly appreciated,

Barry

[Nabeel AModerator]

Hi again,

Please remove the previous script first and then add the following script in Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
  	$('.mejs-overlay-play').click(function(e) {
  		$(this).parents('.x-video.player').addClass('hide-icon');
   	});
});

Then add the following CSS code in Appearance > Customize > Custom > Edit Global CSS:

.hide-icon:before {
    content: "" !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Piranhabar_webParticipant]

This reply has been marked as private.

[Piranhabar_webParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

I can see the issue that the code is not working. Although, when I tried in just adding on the console it works. This means that there’s something from your setup that is preventing the code from working.
The only issue I am seeing on the console is the GOOGLE MAP API warning from Ubermenu. Please go to Appearance > Ubermenu > General Settings Tab > Assets Tab: Load Google Maps API: Uncheck this option. Try again after this.

[Piranhabar_webParticipant]

Thanks Lely,

I tried this and I still no luck, I’m afraid.

I’ve also tried disabling all the plug ins, testing and still no good.

I’m currently testing the click function using an alert message, however it is not appearing in the console of the page:

Here is the code:

/* X-video-icon – Hide on click – START */
jQuery(function($) {
$(‘.mejs-overlay-play’).click(function(e) {
alert( “HELLOO00000” );

});
});
/* X-video-icon – Hide on click – END */

I’m wondering if this means it’s not responding to the video player overlay in cornerstone?

If not, can you think of any of the other plugins that can occasionally conflict with custom javascript?

Many thanks,

Barry

[Author]

Posts