0

I have a short, ~2-second video that plays on a loop in the background of a website I'm making, which, when it appears through transparent portions of divs, gives the effect of a metallic shimmer. It looks great. The problem is, when an iOS device is in low power mode, the video not only doesn't play (which is acceptable, I get it), it shows a big honkin' play button that shows through those same transparent portions of divs. I need to get rid of that, but every solution I've found seems to not work in iOS 14.

Here's the video tag:

<video id="videoElement" src="copper.mp4" autoplay loop playsinline muted webkit-playsinline></video>

…and the CSS:

video#videoElement::-webkit-media-controls, 
video#videoElement::-webkit-media-controls-start-playback-button, 
video#videoElement::-webkit-media-controls-play-button, 
video#videoElement::-webkit-media-controls-panel, 
video#videoElement::-webkit-media-controls-container, 
video#videoElement::-webkit-media-controls-overlay-play-button, 
video#videoElement::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}
heylesterco
  • 3
  • 1
  • 2

1 Answers1

3

You can do this with JQuery. Include it with this:

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

The following code will play the video as soon as the user interacts with their device in any way. This also acts as a workaround for regular safari autoplay issues.

<script type="text/javascript">
$('body').on('click touchstart', function () {
            const videoElement = document.getElementById('videoElement');
            if (!videoElement.playing) {
                videoElement.play();
            }
    });
</script>

You can't trigger video playback without the user interacting with device (this is probably a good thing).

If you'd like to instead completely disable playback when low power mode is enabled (and some of us will thank you greatly), you can do the following:

<script type="text/javascript">
var promise = $('#videoElement').play();

if (promise !== undefined) {
  promise.then(_ => {
   // Autoplay was successful
  }).catch(error => {
   $('#videoElement').remove()
 });

}
</script>

I'll dig some more to see if there's a way to do this with pure CSS, but I doubt it'll be anywhere near as "stable".

kat
  • 104
  • 1
  • 3
  • This worked perfectly! Thank you so much! – heylesterco Apr 02 '21 at 00:22
  • heylesterco, if this helped you you can upvote it and mark it as the accepted answer – kat Apr 02 '21 at 15:24
  • 1
    I marked it as the accepted answer, but I still have less than 15 reputation points so it won’t show my upvote. – heylesterco Apr 03 '21 at 15:08
  • is there a way to do this with vanilla javascript ? – Thiousi Sep 21 '22 at 10:27
  • All of this is portable to vanilla JS as far as I know. You can reference this answer: https://stackoverflow.com/a/44990047/13062807 which has some examples for subscribing to these click events. – kat Sep 22 '22 at 12:53
  • 1
    @Thiousi here's where I found the vanilla JS I needed: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#the_play_method – dannypernik Feb 05 '23 at 02:28