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

유튜브 90도 회전 반응형

· 2년 전 · 1794 · 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년 전
@오빠야 말씀만이라도 감사합니다.
2년 전
역시 비타주리님
유용한 자료 감사합니다.
2년 전
@푸른산타 유용한지 아닌지는 잘 모르겠어요. 어쨌거나 감사합니다.
2년 전
고생 많으셨어요
2년 전
@그리운달나라 감사합니다
유용한 자료 감사합니다.
2년 전
@thedream 감사합니다
와..역시 대단하십니다~ 추천~~

게시글 목록

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