일정비율이 넘어가면 더이상 비디오가 커지지 않도록 제한하면 될 것 같은데 아직 어떻게 해야하는지 모르겠다. 추후 발견하면 추가하자. (2022.Mar.13th)
그래서 방법을 바꿔 화면이 커지면 레이아웃 구성이 바뀌도록 변경했다.
(upNext가 하단에서 오른쪽으로 위치하도록 변경)
[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; /* 최대사이즈 고정 */
[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의 비율이 넘어가게 되면 화면 비율이 깨지며 안보이는 부분이 생긴다. (오른쪽 검은 영역)