iframe
아이프레임은 html inline frame 요소이며 inlineFrame의 약자이다.
효과적으로 다른 html 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있다.
frameBorder 는 deprecated 즉 더이상 사용하지 않는 속성이다. css에서 border=0 으로 설정해주어야 한다.
url src 불러오기
url 값은 유투브 동영상의 share 클릭, embed 클릭 한 후 복사한다.
https://www.youtube.com/embed/동영상의 키값?추가할속성=깂
위 형식으로 사용할 수 있다.
iframe width가 100% 일때 콘텐츠 높이 지정
우리가 많이 사용하고 있는 유튜브 동영상의 사이즈는
width="560" height="315"로 고정되어 있다. 약 16:9 비율.
iframe 태그가 컨테이너 영역에서만 움직일 수 있도록
position으로 위치를 지정해줬다.
iframe {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;그리고 iframe의 크기가 컨테이너 크기에 따라 자동 조절되게 width: 100%; height: 100%; d을 준다.
사실상 이 작업을 하려면 중요한 것은 컨테이너인데,
.iframe-container {
position:relative;
width: 100%;
height: 0;
overflow: hidden;
padding-top: calc(9/16 * 100%);
}컨테이너에 padding-top (혹은 padding-bottom)을 줘서 iframe이
있을 공간을 줘야한다.
height에 0을 주는 이유는 오로지 padding만 이용해서 높이를 지정하기 위해서이다. 글자가 있을 경우 height가 auto이면 글자 높이도 더 해진다.
padding-top (혹은 padding-bottom) 에 화면 비율을 퍼센트값으로 지정해서 높이 공간을 마련해준다.
참고로 자주 쓰이는 화면 비율은
4:3 = 75 %
16 : 9 = 56. 25 %
21 : 9 = 42.85714285714286 %
