Задать вопрос
@alexiusgrey

Как на ios в теге video убрать controls?

На андроиде их и так нету. А на айфоне есть. Клиент хочет убрать контролсы из видео.
controls="false" ставлю.
Само видео
<video id="video-widget__video" class="video-widget__video" src="https://alternative24.com.ua/wp-content/uploads/2023/04/293722837_544024700785249_2037764448503086605_n.mp4" preload="auto" autoplay="autoplay" loop="loop" muted="muted" playsinline width="300" height="150" controls="false">
      <source src="https://alternative24.com.ua/wp-content/uploads/2023/04/293722837_544024700785249_2037764448503086605_n.mp4" type="video/mp4">
    </video>

Пробую способ из гугла
video::-webkit-media-controls-start-playback-button, 
video::-webkit-media-controls,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display {
  display: none;
  opacity: 0;
}

Не помогает тоже.
Многие способы датированы еще 2016м, я даже не представляю, что для этого сафари сейчас актуально.
Чем убрать контролсы?
  • Вопрос задан
  • 679 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@archelon
вот мой код из свежего проекта
<video autoplay="" muted="" loop="" disablepictureinpicture="" webkit-playsinline="" playsinline="" pip="false" poster="poster.jpg">
      <source type="video/mp4" src="video.mp4">
    </video>

scss
video {
  background-color: transparent;
  border-bottom: 1px solid transparent; /* хак для предотвращения мелькания при загрузке на некоторых версиях ios */
  &::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
    visibility: hidden;
  }
  &::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
    visibility: hidden;
  }
  &::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
    visibility: hidden;
  }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы