I have the following function that I am using to expand an auto-playing video when the user clicks on the media area. (Sample video link supplied)

if(heroVideo) {
    const heroVideoCont = heroVideo.querySelector('video');

    heroVideoCont.addEventListener('click', () => expandVideo(heroVideoCont));

    function expandVideo(targ) {
        if(targ.requestFullscreen) {
            targ.requestFullscreen();
        } else if(targ.webkitRequestFullscreen) {
            targ.webkitRequestFullscreen();
        } else if(targ.msRequestFullScreen) {
            targ.msRequestFullScreen();
        }
    } 

    function controlVideoVolume(targ) {
        if(document.fullscreenElement) {
            targ.removeAttribute('muted');
        } else {
            targ.setAttribute('muted', '');
        }
    }

    document.addEventListener('fullscreenchange', () => 
       controlVideoVolume(heroVideoCont));
    document.addEventListener('mozfullscreenchange', () => 
       controlVideoVolume(heroVideoCont));
    document.addEventListener('webkitfullscreenchange', () => 
       controlVideoVolume(heroVideoCont));
    }

<div class="hero__container--media">
     <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" autoplay="autoplay" loop="loop" muted playsinline="" preload="metadata"></video>
</div>

It appears as expected on desktop versions of Chrome and Safari. It also works on Safari with user agent iOS 14.1.0 selected.

However, it does not work on mobile (only iPhone iOS 15.1 tested). I changed the event listener to a tap event but this had no change. The only way I seemed to be able to get it to expand was to add the controls attribute. Although this helps I am in the usual situation of design 'demands' that no native controls are displayed in its inline state.

Any guidance would be ideal.

As a bonus, the muted/unmute function does not work with Safari. Is there a workaround for this or is it just native functionality that cannot be overwritten?