Hide Playbutton for decorative Videos

Developers
1

Hey guys, perhaps someone knows a solution:
I want to hide the playbutton for decorative Videos. On Desktop its hidden but Tablet and Mobile is showing it.
Even though my settings are Autoplay, Loop,Mute,Play inline.

Cheers
Monika

IMG_0168
IMG_0168510×640 68.2 KB

2

Hey Monika,

To hide the play button on tablet and mobile, you might need to add custom CSS targeting those devices because sometimes the default settings don’t apply fully across breakpoints. For example, try something like this:

@media (max-width: 1024px) {
  .your-video-class::-webkit-media-controls-play-button {
    display: none !important;
  }
  .your-video-class::-moz-media-controls-play-button {
    display: none !important;
  }
  .your-video-class::-ms-media-controls-play-button {
    display: none !important;
  }
}

Replace .your-video-class with the actual class or selector for your video element.

Also, check if the video element or player adds any custom controls on mobile that need to be hidden separately.

Hope this helps!

3

Thanks for your help! Thats what I also tried once, but that did not help. the Playbutton ist still visible on tablet :confused:

4 
document.addEventListener('DOMContentLoaded', () => {
  // Run only for tablet and below (screen width ≤ 992px)
  if (window.innerWidth <= 992) {
    const vids = document.querySelectorAll('video[autoplay]');
    
    vids.forEach(v => {
      v.muted = true; // mobile autoplay requirement
      v.setAttribute('playsinline', ''); // prevent fullscreen on iOS
      v.play().catch(err => {
        console.warn('Autoplay blocked:', err);
      });
    });
  }
});

Have you tried something like this for tablet/mobile sizes before? :eyes:
And remember to check your console logs to see if autoplay gets blocked!