비디오를 창 크기에 맞게 어떻게 flexible하게 만들지?

Eunne·2022년 3월 13일
0

Youtube clone

목록 보기
2/3

Goal

  • 유투브 비디오 크기를 윈도우 창 크기에 맞춰 유동적으로 변하게 하려 한다.
  • iframe tag를 사용했다.


Solve

  • 일정비율이 넘어가면 더이상 비디오가 커지지 않도록 제한하면 될 것 같은데 아직 어떻게 해야하는지 모르겠다. 추후 발견하면 추가하자. (2022.Mar.13th)

  • 그래서 방법을 바꿔 화면이 커지면 레이아웃 구성이 바뀌도록 변경했다.
    (upNext가 하단에서 오른쪽으로 위치하도록 변경)


Code Ver.1

[HTML]
<section class="videoplayer">
	<iframe class="videoplayer-iframe" src="https://www.youtube.com/...
</section>

[CSS]
.videoplayer {
  background-color: var(--color-black);
  text-align: center; /* 정렬 등은 아이템을 감싸는 박스에 적용하는구나. */
  position: sticky;
  top: 0px; /* 어떤 지점에 머물지 top 값을 꼭 함께 지정해줘야함. */
}

.videoplayer .videoplayer-iframe {
  width: 100%;
  height: 100%;
  max-width: 1000px; /* 최대사이즈 고정 */
  • width는 유동적인데 height가 비유동적이다.
  • 찾아보니 iframe으로 가져온 유투브 비디오는 세로가 150px로 고정이라고 한다.
  • 세로의 크기를 유동적으로 만들어주자.

Code ver.2

[HTML]
<section class="videoplayer">
	<iframe class="videoplayer-iframe" src="https://www.youtube.com/...
</section>

[CSS]
.videoplayer {
  position: sticky;
  /*16:9*의 비율*/
  width: 100%;
  /* width의 크기에 따라 자동적으로 height의 비율을 조정함 */
  padding-bottom: 56.25%;
}

.videoplayer .videoplayer-iframe {
  /* videoplayer라는 컨테이너 안에 비디오를 고정시키는거임
  그래서 Videoplayer 비율이 넘어가면 안나오게됨*/
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
  • iframe의 비디오의 가로와 세로 크기를 유동적이도록 100%로 만들고,
    iframe의 parent인 box(.videoplayer)에 호환되도록 position을 absolute로 만든다.

  • iframe을 감싸는 box(.videoplayer)의 크기를 지정한다. 이 때, 세로길이가 가로길이에 대해 유동적일 수 있도록 padding-bottom에 %값을 준다.

  • 56.25%인 이유는 유튜브 비디오 사이즈가 16:9인데, 가로길이를 기준으로 세로길이를 계산하기 때문에 9/16 = 0.5625 이기 때문이다.

  • 하지만 16:9의 비율이 넘어가게 되면 화면 비율이 깨지며 안보이는 부분이 생긴다. (오른쪽 검은 영역)



References

profile
I'm a super-duper crazy dev who is gotta go one's own way

0개의 댓글