Как создать адаптивную обтравочную маску для видео - PullRequest
Новая
       66

Как создать адаптивную обтравочную маску для видео

0 голосов
/ 11 марта 2020

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

Вот это html: 

<div id="welcomeHero">
  <div id="clipBox">
    <div id="videoContainer">
      <iframe src="https://player.vimeo.com/video/396587394" width="640" height="361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" class="svg-clipped"></iframe>
      <svg id="Layer_1" data-name="Layer 1" viewBox="0 0 987 607.15" preserveAspectRatio="xMinYMin meet">
        <defs>
          <style>
.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;}
</style>
        </defs>
        <clipPath id="svgPath">
          <polygon class="cls-1" points="986.5 231.13 986.5 230.31 893.56 153.15 800.63 75.17 707.69 153.15 691.87 166.28 599.47 89.57 493.5 0.65 387.53 89.57 295.13 166.28 279.31 153.15 186.37 75.17 93.44 153.15 0.5 230.31 0.5 606.65 281.57 606.65 372.24 606.65 614.75 606.65 705.43 606.65 986.5 606.65 986.5 231.13 986.5 231.13"></polygon>
        </clipPath>
      </svg>
    </div>
  </div>
</div>

CSS: 

#clipBox {
    clip-path: url(#svgPath);
    padding-bottom: 52%;
    width: 61.5625%;
    margin: 0 auto;
}

#videoContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; overflow: hidden;
    max-width: 100%; height: auto ;
    margin: 0px auto 0 auto;
    top: -18.5vw;
    width: 100%;
}

#videoContainer iframe, #videoContainer object, #videoContainer embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

Чего мне не хватает?

...