Animation does not work in the mobile version of the site, although through the element explorer in the smartphone browser, everything is fine. On the phone, the video just turns off and that’s it, although it should increase and stand in the center of the screen when you click on the screensaver

I tried using js, but nothing comes out
html

<div class="bakctage">                                  
<div class="video__poster" tabindex="0">                                              
<video id="video" class="video" poster="assets/img/постеры к                
 подкастам/IMG_8742.JPG"src="assets/video/сладко.mp4" tabindex="0"></video>                                 <a href="#video" id="play__img" class="video__img"></a>                             
</div>                             
<div class="bakctage-info">                                 
<a>Фриц Ланг - М</a>                             
</div>                             
<div class="backstage_data">                                    
<a>Дата:</a> <a>29.06.2020</a>                              
</div>                          
</div>

CSS

.video__poster video {
        width: 230px;
        height: 140px;
    }
.video__poster video {
    display: block;
    padding: 0.5%;
    cursor: pointer; 
}
    .video__poster[tabindex="0"] {
    cursor: zoom-in;
    }
    
    .video__poster video[tabindex="0"]:focus {
        position: fixed;
        z-index: 90;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: auto;
        max-width: 90%;
        height: auto;
        max-height: 90%;
        margin: auto;
        box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
        -webkit-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
    }

    .video__poster video[tabindex="0"]:focus,
    .video__poster video[tabindex="0"]:focus~* {
    cursor: pointer;  
    }

JS

<script>
    const videos = document.querySelectorAll('.video');
    videos.forEach(video => {
        const playButton = video.parentElement.querySelector('.video__img');
        playButton.addEventListener('click', () => {
            if (video.paused) {
                videos.forEach(otherVideo => {
                    if (otherVideo !== video && !otherVideo.paused) {
                        otherVideo.pause();
                        otherVideo.parentElement.querySelector('.video__img').classList.remove('play__img-off');
                        otherVideo.removeAttribute("controls");
                    }
                });

                video.play();
                playButton.textContent = '';
                playButton.classList.add('play__img-off');
                video.setAttribute("controls", "controls");
            } else {
                video.pause();
                playButton.textContent = '';
                playButton.classList.remove('play__img-off');
                video.removeAttribute("controls");
            }
        });
    });
</script>