I have an animation saved as MP4 video file and it 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 (poster image).

I tried using JS, but video is not showing.

My HTML code:

<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>