Hide background video play button

Does anybody know how to hide the grey play button on background videos on devices that do not allow auto play please. I want the background video to be eye candy only and it’s not important that it plays, however I do want it to auto play on devices that it allows it on, and therefore do not want to replace with an image for devices. The problem is I have another button over the background video for a different interaction and the automated play button is interfering (visually) with my desired button. I do need to be mindful that disabling the button on this instance and will not affect any other types of play buttons throughout the website. The site is for a visual effects company and so there are many uses of video including, vimeo and youtube links. Please let me know if you have a solution for this. Much appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

If you don’t like the way a built-in component works, your only other option is to use custom code. There are topics in the forum about custom background videos. You have to come up with a place to host video. I like using cloudinary and vimeo. Basically you are just using the HTML5 video element.

See this post for an example → BG Video - Code for Amazon hosted video - #3 by Alistair_Gallop

Hi thank you for the reply, I’d prefer not to have to host it elsewhere, and would ideally like to use the built in component, I was just wondering if there was a piece of code that would hide the button. If anyone knows if this is possible that would be super helpful. I also just noticed that the play button in background video doesn’t seem to work on an iPhone with battery power save mode on, which is the only time that the button shows anyway which seems unusual. Do you happen to know why this would be? Thank you

This is the reference I go to for Safari; macOS and iOS). As
https://developer.apple.com/documentation/webkit/safari_tools_and_features/delivering_video_content_for_safari

Webflow components are only manipulated via the designer whereas custom code is only limited to size (10k chars) using HTML or JavaScript.

Thank you for the info, I will try to get my head around it.