Hide video controls until hover

[Eulogise]

I am using the Bakery Visual Composer with X Theme Pro.

I have an html video element applied as code in a text field, I have omitted the ‘controls’ attribute.

<video class="vid-explainer" id="video-one" src="/assets/Eulogise-Explainer.mp4" poster="/wp-content/uploads/2018/10/video-poster-1.jpg" type="video/mp4">
</video>

I have also added a jquery script in the X-Theme Pro global js panel, to show and hide controls on hover.

$(document).ready(function(){

$(’#video-one’).hover(function toggleControls() {
if (this.hasAttribute(“controls”)) {
this.removeAttribute(“controls”)
} else {
this.setAttribute(“controls”, “controls”)
}
})

});

However this is not working on the site.
Is this the correct place to put the js code?

Is there a way I can just add the js code into a js file? I can’t see how I can link to my own js file.

thanks

[jade]

Hi Ben,

Please try using this code in the Global JS area:

(function($){

    
	$('#video-one').hover(function toggleControls() {
		if (this.hasAttribute("controls")) {
			this.removeAttribute("controls")
		} else {
			this.setAttribute("controls", "controls")
		}
	});

})(jQuery);

The result should be something like this:

Hope this helps.