Видео не воспроизводится ни в одном из браузеров Iphone и перезаписывается при загрузке. Как я могу ждать, пока все загрузится, а затем отобразить мой сайт?

Question

Я создаю свой личный сайт с Гэтсби. Я хочу иметь видео фон для первого раздела. В моем браузере на рабочем столе видео загружается, но когда оно загружается, оно находится в нужном месте (есть ли способ дождаться загрузки всего моего сайта и затем отрендерить его?). В моем телефоне (iPhone X) он не работает ни для одного браузера (Chrome, Firefox, Safari). Видео загружается дольше, и когда оно получается, оно заканчивается текстом.

Я на самом деле не знаю, как решить эту проблему. Это ссылка на мой сайт: https://davidneios.netlify.com/en/

И хранилище: https://github.com/DavidNeiOs/davidneios_www

Полный файл вы можете найти в davidneios_www / src / pages / index.tsx

 const IndexPage = ({ intl }: Props) => (
  <Layout>
    <SEO title="Home" />
    <VideoWrapper>
      <MainVideo muted loop id="myVideo" autoPlay playsinline>
        <source src={CityMp4} type="video/mp4" />
        <source src={CityWeb} type="video/webm" />
      </MainVideo>
      <VideoInfo>
        <Text withComponent="h1" variant="headerLargePrimarydBold">
          {intl.formatMessage({ id: "index.h1.title" })}
        </Text>
        <Text variant="bodyLargePrimary">Born and raised in Colombia ??</Text>
        <Text variant="bodyLargePrimary">
          I have been living in Montreal, CA for almost 4 years
        </Text>
      </VideoInfo>
    </VideoWrapper>
  </Layout>
)

export default injectIntl(IndexPage)

Я просто ожидаю, что видео будет работать так же, как и в настольных браузерах. Я не тестировал в браузерах Android, но я предполагаю, что это будет иметь аналогичную проблему