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

유튜브 90도 회전 반응형

· 2년 전 · 1793 · 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년 전
오! 이거 신비님이 찾던 자료 같은데요 ㅋㅋ
2년 전
@리오닥터 맞아요. 딴건 그리 어렵지 않았는데 7/18 이라는 수치를 빼는데 좀 헤맸습니나.ㅋ
2년 전
@비타주리 역시나~ 주리님 ?
2년 전
@리오닥터 원래대로라면 7/18 은 연역으로 빼야 옳은데 연역으로 빼는 통로가 떠오르지 않아서 여러가지 케이스를 대입해 보고 귀납으로 뺐습니다.
그러다 보니 좀 시간이 걸렸네요.ㅜㅠ
@비타주리 추천합니다.^^ 한번 적용해 봐야겠어요. 님께서 유튜브 영상 링크 css로 가림처리한것도 잘되더라구요.
감사합니다. 아주 좋아요 ~~
[http://sir.kr/data/editor/2303/59e4342f6268f3488b0dead522ba7208_1679894970_5479.gif]
2년 전
@sinbi 신비님이 좋아하시니 덩달아 기분이 좋네요
2년 전
감사 합니다. 좋아요.
2년 전
@들레아빠 감사합니다
@비타주리 님 너무나 존경스럽습니다.
연배도 제법이신데....
어찌그리 다재다능하신지 감탄사가 절로 나옵니다.
사실 전 귀하의 코드를 여러번 열어서 살펴 보았습니담...
기본적으로 자바스크립트를 모르는 문외한이라서인지 잘 이해가 되지 않더군요.
혹시나 기본적인 부분부터 시작하는 유료 강의실을 개설해 보심이 어떨런지요.
저와 같은 완죤 초보, 초보, 중급, 고급으로 분류하여서리...

게시글 목록

번호 제목
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