비

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

3717943588_1721667878.134.png

 

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 감사합니다.

비타주리님 오랫만에 오셨네요.
한동안 안보이셔서 궁금했더랍니다.

@메이드

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

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

잘 지내셨죠?

늘 유용한 팁 올려주셔서 감사합니다 !

@크리스휘 유용하게 사용하세요. 크리스휘님도 간만에 뵙네요.

감사합니다

댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

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

+
분류 제목 글쓴이 날짜 조회
MySQL 24-12-14 조회 1,819
기타 24-12-14 조회 1,992
JavaScript 24-12-13 조회 2,135
JavaScript 24-12-13 조회 1,639
PHP 24-12-13 조회 2,100
PHP 24-11-26 조회 4,548
기타 24-11-14 조회 2,457
기타 24-10-30 조회 2,713
PHP 24-10-11 조회 2,232
JavaScript 24-10-10 조회 1,301
JavaScript 24-09-26 조회 1,850
24-09-25 조회 2,412
JavaScript 24-09-07 조회 2,100
24-09-11 조회 1,537
24-09-19 조회 4,244
24-09-10 조회 4,328
24-08-19 조회 2,921
24-10-03 조회 1,802
24-08-07 조회 1,278
24-07-23 조회 1,966
24-07-08 조회 1,555
24-06-27 조회 1,461
PHP 24-08-23 조회 1,661
PHP 24-07-31 조회 1,408
OS 24-07-22 조회 2,382
기타 24-07-22 조회 1,250
기타 24-07-12 조회 1,455
기타 24-07-02 조회 1,673
기타 24-07-02 조회 1,136
JavaScript 24-06-30 조회 1,259