Hide html5 video (overlay) play button

I have an html5 video that plays in full screen automatically and it’s working fine, but if I don’t use or don’t want to use crosswalk plugin, the default html5 video play button will appear on top of the video for a second when video starts to play. Is there way to get rid of that without crosswalk? I have tried everything and googled for hours.

I would very much prefer not to use crosswalk plugin just for this one thing because of the high footprint of crosswalk.

It is not ideal but you could set the style visibility to hidden on the video element -and place an event on the video play to change the visibility to visible.

Try adding a Content Security Policy, add something like this

img-src * ‘self’ http://* ‘unsafe-inline’;

to your CSP

For example, you could add this tag to your index.html file:

<meta http-equiv="Content-Security-Policy"
  content="default-src *;
  style-src 'self' http://* 'unsafe-inline' ;
  media-src * ;
  img-src * 'self' http://* 'unsafe-inline';
  script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'"/>

This should block the static video overlay image from loading.

Reference: https://stackoverflow.com/questions/44752317/hide-native-android-html5-video-play-button-in-css/45197798#45197798

Thanks for this and clearifying what that CSP ment on that stackoverflow page. I saw it earlier, but sadly didn’t understand what they ment by that.

But we decided to scrap that video for now, so I can’t test that just right now. I will get back to that later. But thank you for the reply.

1 Like