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

유튜브 90도 회전 반응형

· 2년 전 · 1800 · 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년 전
@들레아빠 감사합니다
@비타주리 님 너무나 존경스럽습니다.
연배도 제법이신데....
어찌그리 다재다능하신지 감탄사가 절로 나옵니다.
사실 전 귀하의 코드를 여러번 열어서 살펴 보았습니담...
기본적으로 자바스크립트를 모르는 문외한이라서인지 잘 이해가 되지 않더군요.
혹시나 기본적인 부분부터 시작하는 유료 강의실을 개설해 보심이 어떨런지요.
저와 같은 완죤 초보, 초보, 중급, 고급으로 분류하여서리...

게시글 목록

번호 제목
17927
17926
17922
17921
17915
17910
17907
17892
17888
17879
17878
17874
17873
17872
17871
17870
17869
17868
17866
17865
17864
17863
17862
17859
17856
17845
17835
17834
17826
17823