html, css - 유튜브 동영상 2 /모달팝업창 적용

자 여기 메인화면에  유튜브 버튼을 클릭하면 유튜브가 보이게 하기 위해서 영상을 먼저 넣어보았다.

 

16:9의 비율에 맞춰, 가로 850 사이즈로 영상을 맞추고 싶을때 세로(높이) 크기를 구해보자.

가로가 850사이즈일때 16:9 비율 구하기

( 원하는 너비 크기 × 9 ) ÷ 16 ＝ 높이값

(( 850 x 9 ) = 7650 ) ÷ 16 = 478.125

즉 가로(넓이) 850px 세로(높이) 478px

 

 

 

이렇게 높이를 구하고 영상을 넣어봤을때 화면을 옮기거나 축소를하면 ? 자동리사이징 안됨

정가운데가 아닌 이상한데 붙거나 화면이 이동해버린다.. 

즉 모바일이나 여러 다른 환경의 브라우저에 노출될 경우 화면 박살★

 

가변요소로

높이값을 지정하지않고 퍼센트로 항상 정중앙에 위치하도록 해보잣!

 

 

 

1. 유튜브가 들어갈 배경 fixed 잡기

화면 가득히 채워 움직이지 않기 위해서, position:fixed 정렬공식으로 맨 위로 띄워준다. (빨간박스)

.youtube_modal {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;  
    height: 100%;  
    background: rgba(0, 0, 0, 0.5);
    min-width: 1200px;
}

fixed 는 창기준이기 때문에 hight 100% 사용가능

---

2. 유튜브 창을 넣을 기준 만들어주기

고정된 빨간 박스 fixed 안에 작은 박스를 고정하여 유튜브를 띄울 준비를해주자

.youtube_modal .youtube_inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 850px;
}

마찬가지로 position:absolute 로 박스를 띄어주고 포지션 정렬공식으로 화면 정 가운데 위치하도록 한다.

그리고 가로 850px을 고정해준다. (가변요소이니 높이주면 안됨)

---

3. 비울을 %로 변경해주기 

가로 850px 사이즈를 기준으로 퍼센트를 잡기 위해서

(화면 축소/확대시 높이 깨짐 막기 위해, 동일비율로 동영상이 보이게끔)

 

16:9 비율 백분율로 환산하기

16:9 = 100:x 16:9 =100%일때 X 16X = 900 X = 900 /16 X = 56.25%

즉 16:9 퍼센트 비율은 56.25%

 

.youtube_modal .youtube_inner .iframe_wrap {
    position: relative;
    padding-top: 56.25%;
}

화면이 안으로 들어가는 padding 으로 16:9 비율인 56.25% 적용해준다. 

그럼 브라우저에서 화면비율이 변경되어도 동일하게 적용된다. 

가드가 박살난것 처럼 보이지만  그것은 position: relative;로 ausolute의 기준을 잡았기 때문!

---

4. 다시 포지션으로 영역 안에 넣어주기

position:absolute 은 block 기준안에서 내용을 겹칠때 쓰며

block요소 이기때문에 크기는내용만큼 줄어들며 높이를 지정해줘야한다. 

3번에  position: relative로 기준점을 잡았으니 padding 비율을 적용하겠다는뜻

 

.youtube_modal .youtube_inner .iframe_wrap iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 478px;
    vertical-align: top;
}

* 주의할 점은 ifram은 inline-block 이기 때문에 간격이 발생한다.

이때 vertical-align: top 간격삭제 

 

 

 

요약정리

• iframe 은 인라인블럭이므로 하단에 간격나오면 vertical-align:top 으로 제거
• iframe 높이 가변처리시 두번 감싼후 밖에서 widrth 지정하고
• 부모요소 높이를 padding-top:56.25%(16:9높이)으로 잡은후
• iframe은 포지션으로 띄운후 width:100% height:100%

---

유튜브1 편 참고

 

https://hyojinny.tistory.com/manage/newpost/47

https://hyojinny.tistory.com/manage/newpost/47