영상 2개를 미치도록 가로로 배치하고 싶습니다.
조회수 466회
http://ayoba.co.kr/archive/lab/
이 홈페이지에
비메오 영상을 저렇게 가로로 배치하고 싶은데
어떻게 하는지 모르겠습니다..
알려주시면 매우 감사드리겠습니다..
//<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;" src="https://player.vimeo.com/video/690783493" frameborder="0" allowfullscreen="allowfullscreen">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</iframe></div>
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
지금 iframe의 인라인 스타일로 너비 높이 50%를 주셨는데 그건 iframe의 화면비율을 유지하면서 크기를 조정하는 올바른 방법이 아닙니다. iframe의 화면비율을 유지시키려면
position: absolute도 필요하지만 '너비 높이 100%'도 필요한 거에요. 그래야 그 iframe이, 강제로 16:9 비율이 된 사각형을 꽉 채우면서, 결과적으로 16:9 비율의 iframe이 되는 겁니다.그렇기 때문에, 하셔야 하는 작업은 저 iframe을 감싸는 div들을 감싸는 div들을 만들고 그것들을 가로로 배치시키는 일입니다. 당장 떠오르는 건
display: table-cell이군요. 아래 데모를 들어가 보시면, 핵심 구조가 이렇게 되어 있음을 아실 수 있을 겁니다.DEMO: https://codepen.io/yuptogun/pen/jOZqOPL
<div class="item-wrapper"> <div class="item"> <div class="iframe-wrapper"> <iframe><!-- 생략 --></iframe> </div> </div> <div class="item"> <div class="iframe-wrapper"> <iframe><!-- 생략 --></iframe> </div> </div> <!-- div.item을 복사해서 하나 더 만들 수 있음 --> </div> <!-- div.item-wrapper를 복사해서 하나 더 만들 수 있음 -->연구해 보세요!
댓글 입력