유튜브 반응형 강제쇼츠 동영상

1. 원래 가로동영상을 세로로 꺾는 방법입니다. 쇼츠는 시간제약이 있어서 시간제약이 없는 가로동영상을 마치 쇼츠처럼 모바일에 최적화시킵니다.
80도 90도 100도의 3가지 형태입니다.
아래 코드에서 27R3EyTW_MY 는 유튜브의 고유아이디입니다.
[code]
<style>
.deg-80 { display:flex; justify-content:center; align-items:center; max-width:700px; aspect-ratio:349/520; margin:0 auto; }
.deg-80 iframe { display:block; min-width:137%; aspect-ratio:16/9; border:none; transform:rotate(80deg); }
.deg-90 { display:flex; justify-content:center; align-items:center; width:540px; max-width:77%; aspect-ratio:9/16; margin:0 auto; }
.deg-90 iframe { display:block; min-width:177%; aspect-ratio:16/9; border:none; transform:rotate(90deg); }
.deg-100 { display:flex; justify-content:center; align-items:center; max-width:700px; aspect-ratio:349/520; margin:0 auto; }
.deg-100 iframe { display:block; min-width:137%; aspect-ratio:16/9; border:none; transform:rotate(100deg); }
</style>
<div class="deg-80"><iframe src="https://www.youtube.com/embed?playlist=27R3EyTW_MY&loop=1&autoplay=1&vq=highres" allow="autoplay"></iframe></div>
<div class="deg-90"><iframe src="https://www.youtube.com/embed?playlist=27R3EyTW_MY&loop=1&autoplay=1&vq=highres" allow="autoplay"></iframe></div>
<div class="deg-100"><iframe src="https://www.youtube.com/embed?playlist=27R3EyTW_MY&loop=1&autoplay=1&vq=highres" allow="autoplay"></iframe></div>
[/code]
2. https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
3. 아래는 원본동영상입니다.
https://www.youtube.com/watch?v=27R3EyTW_MY
댓글 14개
간만에 팁하나 올리네요.ㅜㅠ
좋습니다
@대립군 감사합니다
굿~~~ 좋네용ㅋ
@푸우니 좋다니 감사합니다
아주 오랜만이네요.. 반갑습니다. 추천~~
@들레아빠 저도 반갑습니다

@sinbi 감사합니다.
비타주리님 오랫만에 오셨네요.
한동안 안보이셔서 궁금했더랍니다.
@메이드
요즘 애프터이펙트 한다고 다른걸 못했어요.
스킨을 하나 준비중인데 간만에 만들려니 코드가 손에 안 붙네요.ㅜㅠ
잘 지내셨죠?
늘 유용한 팁 올려주셔서 감사합니다 !
@크리스휘 유용하게 사용하세요. 크리스휘님도 간만에 뵙네요.
감사합니다
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5066 | 기타 |
DogFoot개발
|
4년 전 | 1817 | |
| 5065 | PHP |
DogFoot개발
|
4년 전 | 1522 | |
| 5064 | PHP |
happyl
|
4년 전 | 1913 | |
| 5063 | node.js |
DogFoot개발
|
4년 전 | 1671 | |
| 5062 | node.js |
DogFoot개발
|
4년 전 | 1687 | |
| 5061 | node.js |
DogFoot개발
|
4년 전 | 1410 | |
| 5060 | node.js |
DogFoot개발
|
4년 전 | 1245 | |
| 5059 | node.js |
DogFoot개발
|
4년 전 | 1245 | |
| 5058 | 기타 |
DogFoot개발
|
4년 전 | 2692 | |
| 5057 | 웹서버 |
DogFoot개발
|
4년 전 | 2715 | |
| 5056 | MySQL | 4년 전 | 1499 | ||
| 5055 | 기타 | 4년 전 | 1426 | ||
| 5054 | OS | 4년 전 | 2063 | ||
| 5053 | 웹서버 | 4년 전 | 3617 | ||
| 5052 | OS | 4년 전 | 2413 | ||
| 5051 | PHP | 4년 전 | 2183 | ||
| 5050 | 웹서버 | 4년 전 | 1712 | ||
| 5049 | MySQL | 4년 전 | 1886 | ||
| 5048 | OS | 4년 전 | 2690 | ||
| 5047 | PHP | 4년 전 | 4364 | ||
| 5046 | MySQL | 4년 전 | 1805 | ||
| 5045 | MySQL | 4년 전 | 1928 | ||
| 5044 | MySQL | 4년 전 | 4122 | ||
| 5043 | MySQL | 4년 전 | 1879 | ||
| 5042 | 기타 |
|
4년 전 | 2629 | |
| 5041 | MySQL | 4년 전 | 1986 | ||
| 5040 | MySQL | 4년 전 | 1712 | ||
| 5039 | MySQL | 4년 전 | 1484 | ||
| 5038 | MySQL | 4년 전 | 1327 | ||
| 5037 | OS | 4년 전 | 4424 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기