비디오 스타일링 방법

페이지를 반응형으로 제작했기 때문에 브라우저의 너비가 변해도 비디오와 이미지의 위치가 변하지 않게 하려했다.

<figure class="Section__media">
    <img class="resetImg rwdImg" src="./assets/category=TV.png" alt="" width="640" height="480" />
    <video class="resetImg rwdVideo" src="./assets/video-tv-0819.m4v" autoplay muted loop></video>
</figure>

먼저 Section-media에 너비 값 max-width 값으로 설정했다 (설정 값은 시안의 크기에 맞췄다.)

.Section {
  &__media {
    max-width: rem(337);

    @include media('>=lg') {
      max-width: rem(480);
    }
  }
}

이미지에는 반응형을 위한 초기 스타일링으로 rwdImg를 적용했다.

.rwdImg {
    max-width: 100%;
    height: auto;
}

비디오는 먼저 초기 스타일링으로 rwdVedio를 적용했다.

.rwdVideo {
    max-width: 100%;
    height: auto;
}

그리고 해당 비디오의 위치를 반응형 웹에서도 위치가 고정될 수 있도록 100% 값을 주어 스타일링을 했다.

.WatchOnTV {
  video {
    $figureWidth: 339;
    $figureHeight: 255;

    @include position(
      absolute,
      top 53 / $figureHeight * 100% left 44 / $figureWidth * 100% z-index -10
    );
    width: 248 / $figureWidth * 100%;
  }
}