Как контролировать высоту родительского блока для применения перехода?

Я хотел бы, чтобы вы поддержали меня, подсказав возможное решение следующей проблемы:

Я требую, чтобы видео, когда я прокручиваю-И видео переходило от 0% до 100% по мере выполнения прокрутки, моя проблема в том, что когда я это делаю, родительское поле делается по размеру видео, полностью исчезая содержимое, вот пример:

function scrollShowPic() {

  const elementPic = document.getElementById("animationVideo")

  document.addEventListener("scroll", e => {
    if (scrollY <= "300") {
      elementPic.style.width = "0%"

    }
    if (scrollY >= "400") {
      elementPic.style.width = "10%"
    }

    if (scrollY >= "500") {
      elementPic.style.width = "20%"
    }

    if (scrollY >= "600") {
      elementPic.style.width = "30%"
    }

    if (scrollY >= "700") {
      elementPic.style.width = "50%"
    }

    if (scrollY >= "800") {
      elementPic.style.width = "70%"
    }

    if (scrollY >= "900") {
      elementPic.style.width = "80%"
    }

    if (scrollY >= "1000") {
      elementPic.style.width = "90%"
    }

    if (scrollY >= "1100") {
      elementPic.style.width = "100%"
    }





  })


}

scrollShowPic()
.about-us {
  height: 500px;
  padding-top: 20px;
  position: relative;
  color: black;
  border: 5px solid;
  height: 100%;
}

.center {
  padding: 15px 30px;
  max-width: 1500px;
  margin: auto;
  border: 1px solid green;
}

video {
  height: 100%;
  width: 100%;
  transition: all .5s ease-in;
  border-top-right-radius: 88px;
}

.video {
  border: 1px solid red;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <title>Dudas y prácticas</title>
  <link rel = "stylesheet" href = "style.css">
</head>

<body>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
    consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
    obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
    commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
    molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
    at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
    Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
    ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
    earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
    porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
    officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
    mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
    quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
    maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
    cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
    aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
    Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
    expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
    ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
    nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
    voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
    alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
    aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
    vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
    quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
    ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
    hic sed commodi ducimus
  </p>
  <section class = "about-us">

    <div class = "center">

      <div class = "video">
        <video id = "animationVideo" width = "100%" height = "100%" autoplay = "autoplay" muted = "muted" loop = "loop" class = "swipeleft" style = "clip-path: polygon(0% 0px, 100% 0px, 100% 100%, 0% 100%);">
          <source src = "https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546-1.mp4" type = "video/mp4">
          <source src = "https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.ogv" type = "video/webm">
          <source src = "https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.webm" type = "video/ogv">
          Sorry, your browser doesn't support embedded videos.
        </video>
      </div>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
    consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
    obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
    commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
    molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
    at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
    Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
    ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
    earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
    porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
    officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
    mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
    quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
    maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
    cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
    aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
    Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
    expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
    ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimusLorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
    nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
    voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
    alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
    aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
    vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
    quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
    ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
    hic sed commodi ducimus
  </section>

  <script src = "js.js"></script>
</body>

</html>

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

здесь я оставляю страницу, которую хочу клонировать введите сюда описание ссылки

css
18.03.2022 19:06
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом деле они используют polygon вместо width и проверяют отображаемый элемент вместо положения прокрутки.

function getViewPercentage(element) {
  const viewport = {
top: window.pageYOffset,
bottom: window.pageYOffset + window.innerHeight
  };

  const elementBoundingRect = element.getBoundingClientRect();
  const elementPos = {
top: elementBoundingRect.y + window.pageYOffset,
bottom: elementBoundingRect.y + elementBoundingRect.height + window.pageYOffset
  };

  if (viewport.top > elementPos.bottom || viewport.bottom < elementPos.top) {
return 0;
  }

  // Element is fully within viewport
  if (viewport.top < elementPos.top && viewport.bottom > elementPos.bottom) {
return 100;
  }

  // Element is bigger than the viewport
  if (elementPos.top < viewport.top && elementPos.bottom > viewport.bottom) {
return 100;
  }

  const elementHeight = elementBoundingRect.height;
  let elementHeightInView = elementHeight;

  if (elementPos.top < viewport.top) {
elementHeightInView = elementHeight - (window.pageYOffset - elementPos.top);
  }

  if (elementPos.bottom > viewport.bottom) {
elementHeightInView = elementHeightInView - (elementPos.bottom - viewport.bottom);
  }

  const percentageInView = (elementHeightInView / window.innerHeight) * 100;

  return Math.round(percentageInView);
}

function scrollShowPic(){
   const elementPic= document.getElementById("animationVideo")
 document.addEventListener("scroll", e=>{
 
 const percent = getViewPercentage(elementPic)
 const polygonPercent = 100 - percent > 0 ? 100 - percent : 0
 
 console.info(polygonPercent)
  
  elementPic.style.clipPath= `polygon(${polygonPercent}% 0px, 100% 0px, 100% 100%, ${polygonPercent}% 100%)`
 
 })
   

   }

   scrollShowPic()
.about-us {
  height: 500px;
  padding-top: 20px;
  position: relative;
  color: black;
  border: 5px solid;
  height: 100%;
}

.center {
  padding: 15px 30px;
  max-width: 1500px;
  margin: auto;
  border: 1px solid green;
}

video {
  height: 100%;
  width: 100%;
  transition: all .5s ease-in;
  border-top-right-radius: 88px;
}

.video {
  border: 1px solid red;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <title>Dudas y prácticas</title>
  <link rel = "stylesheet" href = "style.css">
</head>

<body>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
    consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
    obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
    commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
    molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
    at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
    Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
    ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
    earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
    porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
    officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
    mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
    quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
    maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
    cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
    aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
    Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
    expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
    ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
    nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
    voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
    alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
    aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
    vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
    quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
    ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
    hic sed commodi ducimus
  </p>
  <section class = "about-us">

    <div class = "center">

      <div class = "video">
        <video id = "animationVideo" width = "100%" height = "100%" autoplay = "autoplay" muted = "muted" loop = "loop" class = "swipeleft" style = "clip-path: polygon(0% 0px, 100% 0px, 100% 100%, 0% 100%);">
          <source src = "https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546-1.mp4" type = "video/mp4">
          <source src = "https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.ogv" type = "video/webm">
          <source src = "https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.webm" type = "video/ogv">
          Sorry, your browser doesn't support embedded videos.
        </video>
      </div>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
    consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
    obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
    commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
    molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
    at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
    Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
    ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
    earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
    porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
  </section>

  <script src = "js.js"></script>
</body>

</html>
18.03.2022 20:02

Другие вопросы по теме

Отрегулируйте ширину прямоугольника SVG в соответствии с его содержимым
Как я могу исправить высоту в MaterialUI?
Bulma flex оправдать содержимое не работает в reactjs
Как добавить тему в div в угловом материале
3 карты столбцов подряд с бутстрапом
Bulma: Показать карту в ячейке таблицы при наведении?
Свойство box-sizing не работает на Microsoft Edge
Как сделать так, чтобы ширина раскрывающегося списка (фон) соответствовала родительскому li без использования только медиа-запросов Css
Как создать свернутую боковую панель меню?
Как изменить запрос на изменение значения таблицы tr TD

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

Невозможно загрузить значок дома в html-коде с помощью шрифта-awesome
Как добавить эффект наведения, чтобы увеличить размер текста в теге Vue?
Заголовок вне строки
Пытаюсь установить интервал в JS, чтобы изменить zIndex div
CSS изменить заполнение дочернего элемента
Кнопка не центрируется
Как применить эффект наведения к изображениям?
Как раскрасить только два элемента div одного класса или идентификатора?
Изменение меню работает отлично, но другие области, где у меня есть якоря, не работают
Кнопка «Подробнее» для текста внутри нескольких карточек, созданных с помощью *ngFor