[marcspParticipant]

I am using the video element and a video hosted in my media library.

Everything is working well, except the controls.
I don’t want the controls to be visible except on hover.
I saw this post from support (see below) but that actually isn’t what happens.
If you navigate to the page the video begins playing but the controls are visible and remain so.
They only hide if you hover over the video and then move off the video, then they will hide. If you never hover over the video the controls are always visible.

Hey Chase,
Thanks for writing in. You can enable the control because it auto-hides and shows when hovered.
Hope that helps. 🙂

Thanks

[NicoModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[marcspParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thanks for your site URL.
Video control is auto hide once it starts to play. After clicking the play button and remove the mouse focus the control will be hidden.

You may check here for reference:http://theme.co/x/demo/integrity/1/shortcodes/responsive-video/

Hope this helps.

[marcspParticipant]

Hey there,

If you look again at my first comment what you describe is not what happens. Also this video is auto play, there is no need to click the play button.

If you click on the link for the page, or refresh the page the video begins to play. It is set to auto play so there is no need to click the play button. If you go to the site you will see that.

In any case the video, when the page is loaded or refreshed begins to play. The controls do not hide. The entire video will play without the controls hiding.

If you mouse over the video the controls stay visible (as they should on hover) and only after you move off of the video will the controls finally hide. So unless you hover and move off the controls do not hide. They should be hidden at the beginning of an auto play video.

So bottom line. The controls never hide unless you hover over the video and move off the video.

The action I would expect would be auto play starts with no controls showing. Only when I hover should the displays show.

The link you sent shows all videos that need to be started. This is auto play.

The action is the same in every browser. Take another look.

thanks

[ThaiModerator]

Hi There,

Please make sure you have turned on the ‘Hide Control’ option:

If it doesn’t work, please provide us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / Password

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

[marcspParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Upon checking your site, we no longer see the video controls with or without hovering on the video. This is what we are seeing in our end.

Please confirm that this issue has been resolve. If you have installed a caching plugin (like WP Super Cache), please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps.

[marcspParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Just enable the controls so that you can pause and play the video. To hide and show the controls when you hover on the video, Please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css

.site .x-video .mejs-controls {
    opacity: 0 !important;
    transition: opacity 0.5s linear;
}

.site .x-video:hover .mejs-controls {
    opacity: 1 !important;
    transition: opacity 0.5s linear;
}

We noticed that you are using an older version of X. Please make sure that you are up to date. Our latest versions are:
X Theme: 4.0.7
Cornerstone: 1.0.5
Visual Composer: 4.6.2
Revolution slider: 5.0.4.1

You can find the latest version numbers here: (http://theme.co/x/member/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thank you.

[marcspParticipant]

Thank you, that is the effect I was trying to achieve.

It is appreciated.

[ChristopherModerator]

You’re welcome.

[Author]

Posts