유튜브 영상을 90로 회전 후 반응형 만들고 있는데....

유튜브 영상을 90로 회전 후 반응형 만들고 있는데....

QA

유튜브 영상을 90로 회전 후 반응형 만들고 있는데....

본문

제 머리로는 도저히 해결이 안 되네요.

ChatGPT에게 물으니, 엉뚱한 대답만 늘어놓고.....

 

현재 제가 짠 코드는 아래와 같아요.


<style>
.rotate {
  position: relative;
  top:25vw;
  border:3px solid red;
  padding:55.9% 0 0;
  width:100%;
}
.rotate iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}
</style>
<div class="rotate">
  <iframe src="https://www.youtube.com/embed/27R3EyTW_MY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

결과보기: https://codepen.io/sinbi/pen/BaOMJdK

 

이걸 영상이 좌우 꽉차게 한 상태에서 반응형 유지되게 하려면 어떻게 짜야 할까요?

영상 좌우 검정 화면 제거하려고 부모요소에 padding 주다 보니 딜레마에 빠졌네요.

이 질문에 댓글 쓰기 :

답변 4

 

https://sir.kr/g5_tip/20246

오호 땡기는 스크립트네요.

지금은 제가 자야 하니까 내일 사무실 나갈 때까지 해답이 없으면 코드를 짜 드릴게요.^^

.rotate iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vw;
  transform: rotate(90deg);
}

 

높이를 일단 화면 크기로 주면될것같은데.. 너비도 조정 하는 방법을 찾아봐야겠네요...

.rotate iframe 에 있는 

transform:rotate(90deg);를 

 

.rotate에 포함시키면 되지 않나요? 

.rotate {
  position: relative;
  top:25vw;
  border:3px solid red;
  padding:55.9% 0 0;
  width:100%;
  transform: rotate(90deg);
}
.rotate iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }

 

원하시는게 정확히 어떤 결과물인지 몰라서 ^^;; 

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT