유튜브 영상을 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
비타주리 님 너무너무 감사합니다.
( ^ __________ ~ ) ===b
오호 땡기는 스크립트네요.
지금은 제가 자야 하니까 내일 사무실 나갈 때까지 해답이 없으면 코드를 짜 드릴게요.^^
감사합니다. ^^ 좌우 공백 없이 반응형 짜는 게 일이네요. ㅎ
.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. 영상 회전
2. 스마트폰 세로 보기 비율 유지
3. 영상 좌우 너비 꽉차게 반응형
