Hide download video button on mobile

[Lyser]

Hello,
In slider revolution, I’ve done a button with a simple link to read a video.
I would like to know if it’s possible to hide the download button on the right when you read the vid on mobile.

[thai]

Hi There,

Please add the following code under X > Theme Options > JS:

jQuery(document).ready(function($) {
	$('video').attr('controlsList', 'nodownload');
});

Hope it helps

[Lyser]

the download button is still there, on the right (see screenshot in previous post)
I’m with pro, i added the code in custom/edit global javascript.
I specify it’s for the mobile view.
Any other idea to make this download button diseapear ?

[ruenel]

Hello There,

Sorry if the code given previously by Thai did not work out for you. We will be removing the JS code and use this custom css code instead:

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

I went ahead and made the necessary changes already. Please check your site now.

[Lyser]

But did this code worked for you ? I mean does the fact that it don’t work comes from me ?
I’m on android and after cleaned cache there is still that download buton on the right

When you click on homepage play button on mobile, it open the vid in another page with this player (screenshot above), could it be why it does not work ?
Here is the link of the video opened with my android mobile phone :

[christian]

Hey @Lyser,

Sorry for the confusion. The code @RueNel provided does not work either. There are two things you can do in this situation.

####1. I see you have a desktop button and a mobile button. Your desktop button opens a lightbox and the mobile button just links directly to the mp4 video which the theme nor WordPress does not control. That is why the codes give will not work. The video controls you see are browser defaults.

So what you could do here is delete your mobile button and just show a lightbox instead of linking directly to the video.

####2. Create a page using a Blank No Container | No Header No Footer page template and use a Video element to display your video. With the Video element, you can choose to show no controls. In your slider, instead of linking directly to the video, link to the page with the video instead.

Hope that helps.

[Lyser]

Ok, i created a video element in a page and that’s good.
There is things i would like to know :

1. The control bar (only with play/pause and timeline, perfect) stay during all the video, how to make it disapear ? (and make it visible only when touching the screen)

2. how to center the video vertically in the page and add a black background (i added a background color in the page setting without results)
   

[Alaa]

Hi,

In the (Page Settings > Body CSS class) field, you should add only CSS classes name, not CSS codes, I’ve edited your page and removed background-color: #000000 then added video_black.

Also, in (Pro > Theme Options > CSS), I’ve added this snippet:

.video_black {
  background-color: #000;
}
@media screen and (max-width: 680px){
  .video_black #cs-content {
      margin: 25vh 0;
  }
  .video_overlay_none {
    opacity: 0!important;
  }
}

And in (Pro > Theme Options > JS), I added:

jQuery( window ).load(function() {   
  jQuery(".mejs-inner").click(function() {
     jQuery(this).find('.mejs-controls').toggleClass('video_overlay_none');	
  });
});

Now, the background is black, the video is centered and the controls bar is hidden when the video is playing and it appears when the video is paused.

Thanks.

[Lyser]

Ok thx for the background color.
For the bar, i have the reverse effect, when the video start, there is the timeline and when i touch the screen, it pause and then the timeline desapear, could it be inversed ? (bar appear only when paused)
The video is autostart, perhaps this is why it’s inverted ?

[friech]

Hi There,

That could be possible with custom development, but this would be outside the scope of support that we can offer. The default behavior of player controls when enabled, is to be hidden when the cursor is out of the player and show when you hover over on the player.

Thanks for understanding.