我的网站上有响应式视频背景。我创建了自己的按钮，用于切换该视频的全屏显示。在PC和Android上运行正常，但是在触摸此按钮后在iPhone上没有任何反应。有什么办法可以工作吗？
HTML：
div class="video-container">
<video src="./video/totemy.mp4" autoplay loop="true" muted defaultMuted playsinline></video>
<div class="video-control">
<img src="./img/controls/mute.svg" width="50px" height="50px" id="mute-btn" class="control-icon">
<img src="./img/controls/increase.svg" width="50px" height="50px" id="full-screen-btn" class="control-icon">
</div>
</div>
JS：
const video = document.querySelector(".video-container video");
const fullScrnBtn = document.querySelector("#full-screen-btn");
...
fullScrnBtn.addEventListener("click", () => toggleFullscreen());
toggleFullscreen = () => {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
}
};
CSS：
.video-container {
position: relative;
top: 0px;
bottom: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
}
.video-container video {
min-width: 100%;
min-height: 100vh;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-control {
position: absolute;
bottom: 10px;
right: 10px;
display: inline-flex;
}