0

добавил свойство playsinline

window.addEventListener('DOMContentLoaded', () => {
    const menu = document.querySelector('.nav-menu'),
    menuItem = document.querySelectorAll('.nav-menu__button'),
    hamburger = document.querySelector('.hamburger');

    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('hamburger_active');
        menu.classList.toggle('nav-menu_active');
    });

    menuItem.forEach(item => {
        item.addEventListener('click', () => {
            hamburger.classList.toggle('hamburger_active');
            menu.classList.toggle('nav-menu_active');
        })
    })
})
html {
    font-size: 62.5%;
    }

.container {
    height: 100%;
    margin: 0 auto;
    
    background-color: #e0dddd;
    
    }
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    object-fit: cover;
    clip-path: polygon(0 0,100% 0, 100% 55%, 0 85%);
    }
.bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: black;
    opacity: 0.5;
    clip-path: polygon(0 0,100% 0, 100% 55%, 0 85%);
    }

.nav-menu {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    -webkit-tap-highlight-color: transparent; 
    min-height: 21rem;
    width: 100%;
    z-index: 7;
    transition: 1s all;
    flex-direction: column;
    justify-content: space-evenly;
    top: 100vh;
    right: 0;
    top: 100vh;
    }
.nav-menu_active {
    top: 25vh;
    }
.hamburger {
    width: 5rem;
    height: 5rem;
    position: fixed;
    top: 3rem;
    left: 85%;
    z-index: 11;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; 
    }
    
.hamburger__span {
     border: .1rem white solid;
     border-radius: 10rem;
     height: .6rem;
     width: 4rem;
     display: block;
     background: black;
     -webkit-tap-highlight-color: transparent; 
     transition: 1s all;
     backface-visibility: hidden;
     }
     
.hamburger:not(:last-child) {
     margin-bottom: .5rem;
     }
.hamburger_active .hamburger__span {
      -webkit-tap-highlight-color: transparent;
      margin-bottom: -2px;
      }
.hamburger_active .hamburger__span:nth-last-child(1) {
      transform: translateY(2px) rotate(-45deg);
      }
.hamburger_active .hamburger__span:nth-last-child(2) {
      display: none;
      }
.hamburger_active .hamburger__span:nth-last-child(3){
      transform: translateY(4px) rotate(45deg);
      }
.nav-menu__button {
     margin-right: calc( 50vw - 7.5rem );
     margin-left: calc( 50vw - 7.5rem );
     background: $gradient-for-button;
     color: black;
     text-decoration: none;
     padding: 1rem;
     border: .2rem black solid;
     border-radius: 1rem;
     -webkit-tap-highlight-color: transparent; 
     width: 17rem;
     height: 4rem;
     box-shadow: 0rem .5rem .5rem black;
     font-family: 'Robot-light', 'Robot-bobot', 'sans-serif';
     font-size: 1.6rem;
     text-align: center;
     letter-spacing: .2rem;
     text-transform: uppercase;
     }
<div class="hamburger">
            <span class="hamburger__span"></span>
            <span class="hamburger__span"></span>
            <span class="hamburger__span"></span>
        </div>

<nav id="nav" class="main-section__nav nav-menu">
     <a class="nav-menu__button" href="about-me.html">обо мне</a>
     <a class="nav-menu__button" href="publication.html">публикации</a>
     <a class="nav-menu__button" href="master-class.html">моя работа</a>
     <a class="nav-menu__button" href="about-me.html#123" >связаться</a>
 </nav>
 
<div class="container container__main">
            <div class="bg-gradient"></div>
  <video class="bg-video" autoplay loop muted> 
      <source src="img/backround-video.webm"> 
      <source src="img/backround-video.mp4"> 
  </video>
</div>

странно когда загружал сюда фрагмент кода пришлось удалить из класса container пришлось удалить position: relative и z-index: 0, ато фона почему-то вообще не видно было...

Так вот: я сделал сайт, в него добавил видеофон, поверх этого видеофона добавил прозрачный градиент. Теперь когда я захожу на этот сайт с любых устройств и браузеров кроме айфона всё работает корректно. Но когда захожу с айфона, то сначала при загрузке на видеофоне виден значок "воспроизвести", и видеофон не воспроизводится автоматически(т.е. как я понимаю почему-то не работает значение autoplay) и видеофон висит как картинка, а как только я начина взаимодействовать с экраном, (н.п. открываю навигацию с помощью гамбургера) то сразу пропадает градиент.

подскажите как сделать чтобы на айфоне, как и на других устройствах всё выглядело корректно И с чем связано такое поведение?

можете проверить сайт по этой ссылке

7
  • playsinline - вроде как надо добавить - stackoverflow.com/questions/43570460/… 19 мая в 4:25
  • Добавил, но к сожалению результат тот же... Я ознакомился со статьёй в вышей ссылке, там еще более сложный вариант решения предлагается с использованием react, но к сожаления я пока с JS не знаком. И всё же Евгений, огромное вам спасибо за внимание! 19 мая в 11:28
  • Получилось!!! В одном из коментариев по вашей ссылке, один парень рассказывал что у него не воспроизводилось видео пока оно весило больше 3 мб, я сжал видео до 2,6 мб и всё заработало! Евгений, я не знаю как проголосовать за ваш ответ, ещё не освоился на этом сайте, но если вы мне подскажете буду очень вам признателен. 19 мая в 20:37
  • И так, чтобы мой видеофон заработал на iPhone, я произвёл следующие действия: 1) добавил в playsinline в тег video; 2) сжал видео до 2.6 мб; 3) отключил режим энергосбережения. 19 мая в 20:40
  • Осталась вторая часть вопроса: при взаимодействии с экраном (н.п. при активации гамбургера) слетает градиент. Помогите пожалуйста его сохранить! 19 мая в 20:46

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.