유튜브 반응형 강제쇼츠 동영상 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

본문

3717943588_1721667878.134.png

 

1. 원래 가로동영상을 세로로 꺾는 방법입니다. 쇼츠는 시간제약이 있어서 시간제약이 없는 가로동영상을 마치 쇼츠처럼 모바일에 최적화시킵니다.

80도 90도 100도의 3가지 형태입니다.

아래 코드에서 27R3EyTW_MY 는 유튜브의 고유아이디입니다.

 


<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>

 

2. https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

 

3. 아래는 원본동영상입니다.

https://www.youtube.com/watch?v=27R3EyTW_MY

추천
2

댓글 14개

@메이드

요즘 애프터이펙트 한다고 다른걸 못했어요.

스킨을 하나 준비중인데 간만에 만들려니 코드가 손에 안 붙네요.ㅜㅠ

잘 지내셨죠?

전체 5,368
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT