테스트 사이트 - 개발 중인 베타 버전입니다

유튜브 90도 회전 반응형

· 2년 전 · 1797 · 21

 

질문글이 하나 올라와서 코드를 한번 짜 보았습니다. - https://sir.kr/qa/494755

 

유튜브원본 - https://www.youtube.com/watch?v=27R3EyTW_MY

 

[code]

<style>
#yt90Div { width:100%; position:relative; margin:0 auto; }
#yt90Div iframe { position:absolute; display:block; border:none; transform:rotate(90deg); } 
</style>
<div id="yt90Div">
<iframe src="https://www.youtube.com/embed?playlist=27R3EyTW_MY&loop=1&autoplay=1&vq=highres" allow=autoplay allowfullscreen></iframe>
</div>
<script>
addEventListener("resize", yt90Size = () => {
    yt90 = yt90Div.querySelector("iframe"); 
    yt90Width = yt90Div.offsetWidth;
    yt90Div.style.height = yt90.style.width = (yt90Width * 16 / 9) + "px";
    yt90.style.height = yt90Width + "px";
    yt90.style.top = yt90Width * 7 / 18 + "px"; 
    yt90.style.left = yt90Width * -7 / 18 + "px";
} );
yt90Size();
</script>

[/code]

 

검은 뻘여백은 당연히 보이지 않습니다.^^

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 21개

2년 전
@DawnDew 감사합니다

게시글 목록

번호 제목
17591
17590
17589
17588
17587
17584
17583
17582
17581
17579
17577
17575
17574
17573
17572
17569
17564
17560
17559
17555
17554
17553
17552
17549
17548
17547
17542
17533
17531
17524