I am facing an issue with displaying an MP4 video file on the mobile version of my website. Oddly, when I inspect the element in the smartphone browser, everything appears to be working fine.
However, on the phone itself, the video simply turns off without playing as expected. When clicked on the poster image, it should enlarge and appear at the center of the screen.
I attempted using JS to fix this problem but unfortunately, the video is still not showing up.
Here is a snippet of 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>