유튜브 90도 회전 반응형 정보
유튜브 90도 회전 반응형
관련링크
본문
질문글이 하나 올라와서 코드를 한번 짜 보았습니다. - https://sir.kr/qa/494755
유튜브원본 - https://www.youtube.com/watch?v=27R3EyTW_MY
<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>
검은 뻘여백은 당연히 보이지 않습니다.^^
추천
10
10
댓글 21개
오! 이거 신비님이 찾던 자료 같은데요 ㅋㅋ
@리오닥터 맞아요. 딴건 그리 어렵지 않았는데 7/18 이라는 수치를 빼는데 좀 헤맸습니나.ㅋ
@비타주리 역시나~ 주리님 ?
@리오닥터 원래대로라면 7/18 은 연역으로 빼야 옳은데 연역으로 빼는 통로가 떠오르지 않아서 여러가지 케이스를 대입해 보고 귀납으로 뺐습니다.
그러다 보니 좀 시간이 걸렸네요.ㅜㅠ
그러다 보니 좀 시간이 걸렸네요.ㅜㅠ
@비타주리 추천합니다.^^ 한번 적용해 봐야겠어요. 님께서 유튜브 영상 링크 css로 가림처리한것도 잘되더라구요.
감사합니다. 아주 좋아요 ~~
@sinbi 신비님이 좋아하시니 덩달아 기분이 좋네요
감사 합니다. 좋아요.
@들레아빠 감사합니다
@비타주리 님 너무나 존경스럽습니다.
연배도 제법이신데....
어찌그리 다재다능하신지 감탄사가 절로 나옵니다.
사실 전 귀하의 코드를 여러번 열어서 살펴 보았습니담...
기본적으로 자바스크립트를 모르는 문외한이라서인지 잘 이해가 되지 않더군요.
혹시나 기본적인 부분부터 시작하는 유료 강의실을 개설해 보심이 어떨런지요.
저와 같은 완죤 초보, 초보, 중급, 고급으로 분류하여서리...
연배도 제법이신데....
어찌그리 다재다능하신지 감탄사가 절로 나옵니다.
사실 전 귀하의 코드를 여러번 열어서 살펴 보았습니담...
기본적으로 자바스크립트를 모르는 문외한이라서인지 잘 이해가 되지 않더군요.
혹시나 기본적인 부분부터 시작하는 유료 강의실을 개설해 보심이 어떨런지요.
저와 같은 완죤 초보, 초보, 중급, 고급으로 분류하여서리...
@오빠야 모든 코딩언어는 장기와 같습니다.
장기판에서 차포마상 길 가는 법을 모르는 사람은 없거든요.
그런데 똑같은 행마법을 알고 있는데도 어떤 사람의 장기 실력은 평범하고 어떤 사람의 장기 실력은 그것으로 직업이 되는 프로의 수준이 되지요.
자바스크립트도 기본적인 행마법은 웹상에 널렸어요. 아마 저보다 더 많은 속성과 메서드를 알고 있는 사람들도 쎄고 쎘을 거에요.
하지만 행마법을 아는 것만으로는 내공이 아니라고 생각합니다. 중요한 것은 상황에 따른 운용이라고 해야 하는데 제가 운이 좋게도 그 재주가 아주 아주 약간 더 있을 뿐이에요.
어떤 특정 상황이 되면 "어 이건 이 속성과 이 메서드를 조화시키면 될 것 같은데?" 라는 느낌이 머리를 쥐어짜고 숙고하지 않아도 자연스럽게 떠오르는 능력입니다.
어쨌거나 칭찬 말씀 감사합니다.
장기판에서 차포마상 길 가는 법을 모르는 사람은 없거든요.
그런데 똑같은 행마법을 알고 있는데도 어떤 사람의 장기 실력은 평범하고 어떤 사람의 장기 실력은 그것으로 직업이 되는 프로의 수준이 되지요.
자바스크립트도 기본적인 행마법은 웹상에 널렸어요. 아마 저보다 더 많은 속성과 메서드를 알고 있는 사람들도 쎄고 쎘을 거에요.
하지만 행마법을 아는 것만으로는 내공이 아니라고 생각합니다. 중요한 것은 상황에 따른 운용이라고 해야 하는데 제가 운이 좋게도 그 재주가 아주 아주 약간 더 있을 뿐이에요.
어떤 특정 상황이 되면 "어 이건 이 속성과 이 메서드를 조화시키면 될 것 같은데?" 라는 느낌이 머리를 쥐어짜고 숙고하지 않아도 자연스럽게 떠오르는 능력입니다.
어쨌거나 칭찬 말씀 감사합니다.
@비타주리
"느낌이 머리를 쥐어짜고 숙고하지 않아도 자연스럽게 떠오르는 능력"
이런 부분이 값어치가 있다고 강력 주장하는바입니다.
세상만사에 얼매나 많이 알고 있나는 차등의 문제 이더군요.
비근한 예로 제 짜지퍼의 비천한 실력으로 저희회사(중소규모 물류회사)에 늦은 나이로 물류팀 과장을 꿰어차고 있는 실정입니다.
제 밑에 유능한 젊은이도 여럿 있습니만...
@비타주리 님은 자바스크립터로 만든 각종 솔루션을 만들어 유료로 판매하여도 경쟁력이 있어 보입니다.
재고해 보시옵소서.
"네 시작은 미약하나 네 나중은 심히창대하리라"
시작하시면 한 손 보탤 용의가 있습니다.
"느낌이 머리를 쥐어짜고 숙고하지 않아도 자연스럽게 떠오르는 능력"
이런 부분이 값어치가 있다고 강력 주장하는바입니다.
세상만사에 얼매나 많이 알고 있나는 차등의 문제 이더군요.
비근한 예로 제 짜지퍼의 비천한 실력으로 저희회사(중소규모 물류회사)에 늦은 나이로 물류팀 과장을 꿰어차고 있는 실정입니다.
제 밑에 유능한 젊은이도 여럿 있습니만...
@비타주리 님은 자바스크립터로 만든 각종 솔루션을 만들어 유료로 판매하여도 경쟁력이 있어 보입니다.
재고해 보시옵소서.
"네 시작은 미약하나 네 나중은 심히창대하리라"
시작하시면 한 손 보탤 용의가 있습니다.
@오빠야 말씀만이라도 감사합니다.
역시 비타주리님
유용한 자료 감사합니다.
유용한 자료 감사합니다.
@푸른산타 유용한지 아닌지는 잘 모르겠어요. 어쨌거나 감사합니다.
고생 많으셨어요
@그리운달나라 감사합니다
유용한 자료 감사합니다.
@thedream 감사합니다
와..역시 대단하십니다~ 추천~~
@DawnDew 감사합니다
