기다림 악보 : 
waiting_for.pdf (새 탭에서 바로 열기)
그하 악보 : fancy_waltz.pdf (새 탭에서 바로 열기)
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
iframe 태그를 이용하여 유튜브 영상을 퍼올 때
겪을 수 있는 문제가 하나 있다.
작은 화면에서는 브라우저에 횡스크롤바가 생기게 된다는 것이다.
이때, max-width 속성 값을 100%로 설정한다 해도 여전히 문제는 남아 있다.
종횡비가 유지되지 않는다는 것이다.
어떻게 하면 특정 엘리먼트를
작은 화면에서도 짤리지 않으면서 종횡비가 유지되게 할 수 있을까.
엘리먼트의 종횡비가 유지되게 하기 위해선 padding-top 또는 padding-bottom 스타일속성 값을 상대적인 값(%단위의 값)으로 설정해주면 된다.
가로:세로가 100:x가 되게 하기 위해서는
padding-bottom 스타일속성 값을 x%로 설정하면 된다.
(단순히 종횡비만을 위해서는 padding-top과 padding-bottom 중 어느 쪽을 설정하든 상관 없는데
굳이 padding-bottom을 선택한 이유는 이후에 서술하겠다.)
<div style="padding-bottom: 56.25%;"> </div>
<!--56.25%는 16:9 비율을 의미한다.-->이렇게 종횡비를 설정한 엘리먼트 안에 유튜브 영상에 해당하는 엘리먼트를 넣으면 된다.
그런데 그냥 넣으면 상위 엘리먼트의 padding 내부(content box)에 위치하게 된다.
padding을 무시하고 상위 엘리먼트의 윤곽(border box)을 기준으로 하려면 어떻게 해야 할까.
position 스타일속성을 이용하면 된다.
상위 엘리먼트의 position 스타일속성 값은 relative로,
영상 엘리먼트의 position 스타일속성 값은 absolute으로 설정하면 된다.
그리고 영상 엘리먼트를 상위 엘리먼트에 꽉 차게 하기 위해서는
width와 height 속성 값을 100%로 설정하면 된다.
따라서 완성된 코드는 다음과 같다.
<div style="position: relative; padding-bottom: 56.25%;">
<iframe style="position: absolute; width: 100%; height: 100%;" src="#">
</iframe>
</div>
<!--영상의 전체화면 재생을 허용하려면 iframe에 allowfullscreen="" 속성을 추가하면 된다.
iframe 엘리먼트에 기본으로 적용되어 있는 (보기 싫은) 보더스타일을 지우고 싶다면
style 속성에 border-style: none;을 추가해 주자.-->
<!--하단 이미지 참조-->
참고로 영상 엘리먼트의 src 속성 값(#에 올 값)은 영상의 주소가 아니다.
예를 들어 영상의 주소가
https://www.youtube.com/watch?v=어쩌구
라면
#에 올 값은
https://www.youtube.com/embed/어쩌구
가 된다.
...
이리하여
유튜브 영상 잘 퍼가는 방법을 알아 보았다.
그런데
위에서 padding-bottom 말고 padding-top으로도 종횡비 고정이 가능하다고 설명했는데
왜 padding-bottom만 쓴 걸까.
padding-top을 쓰게 되면
position의 기준이 아래쪽이 되어
영상 위에 딱 영상 크기 만한 빈 공간이 생긴다.
하지만 이 역시 영상 엘리먼트에 top 스타일속성을 추가하고 값을 0으로 설정함으로써 해결이 가능하긴 하다.
(뭐하러 그렇게까지 하겠냐마는.)
-------비교 섹션-------
단순 사이즈 고정 Ver.
종횡비 유지 Ver.
...
재밌다 이런 짓