유튜브 영상을 90로 회전 후 반응형 만들고 있는데.... 채택완료
제 머리로는 도저히 해결이 안 되네요.
ChatGPT에게 물으니, 엉뚱한 대답만 늘어놓고.....
현재 제가 짠 코드는 아래와 같아요.
</p>
<p><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></p>
<p><div class="rotate">
<iframe src="<a href="https://www.youtube.com/embed/27R3EyTW_MY"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/27R3EyTW_MY"</a> title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div></p>
<p>결과보기: https://codepen.io/sinbi/pen/BaOMJdK
이걸 영상이 좌우 꽉차게 한 상태에서 반응형 유지되게 하려면 어떻게 짜야 할까요?
영상 좌우 검정 화면 제거하려고 부모요소에 padding 주다 보니 딜레마에 빠졌네요.
답변 4개
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
.rotate iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vw;
transform: rotate(90deg);
}
높이를 일단 화면 크기로 주면될것같은데.. 너비도 조정 하는 방법을 찾아봐야겠네요...
답변에 대한 댓글 1개
조언 감사합니다. ^^
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
.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개
답변 감사합니다.
제가 원하는 건, 아래 조건을 만족하는 것입니다.
1. 영상 회전
2. 스마트폰 세로 보기 비율 유지
3. 영상 좌우 너비 꽉차게 반응형
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
( ^ __________ ~ ) ===b