Пользовательская полноэкранная кнопка не работает на iPhone для воспроизведения видео - PullRequest
Новая
       35

Пользовательская полноэкранная кнопка не работает на iPhone для воспроизведения видео

0 голосов
/ 02 июня 2019

У меня есть адаптивный видео фон на моем сайте. Я создал свою собственную кнопку для переключения полного экрана для этого видео. Отлично работает на ПК и 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;
}

Полный сайт здесь: https://rafaucau.atwebpages.com/totemy/

...