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

유튜브 90도 회전 반응형

· 2년 전 · 1792 · 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 감사합니다

게시글 목록

번호 제목
17657
17655
17654
17653
17652
17651
17650
17642
17633
17632
17631
17630
17628
17624
17623
17620
17618
17617
17614
17612
17611
17610
17609
17608
17607
17604
17603
17602
17600
17594