티스토리 유튜브 쇼츠 세로로 길게 넣기 - PC, 모바일 모두 적용

 

 

유튜브에서 가로로 긴 영상은 그냥 주소 넣고 엔터 치면

자동으로 영상 첨부해 줘서 편한데,

유튜브 쇼츠도 가로로 길게 들어가는 게

마음에 들지 않았다. 

 

설령 PC로 세로 길게 나온다 하더라도

모바일로 보면 가로로 길게 나오는 경우가 많았다.

 

이렇게 들어감. 아니 이러면 누가 눌러보겠냐고요

 

 

 

그래서 챗gpt 의 도움을 받았다.

모바일에서도 세로로 길게 나오게 하려면 `iframe` 의

css 스타일을 조정해야 한다고.

 

기본 유튜브 `iframe` 은 가로에 최적화되어 있기 때문에 쇼츠도 가로로 나오는 것이라 했다.

 

 

<div class="shorts-container">
    <iframe 
        src="https://www.youtube.com/embed/영상ID"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

<style>
    .shorts-container {
        position: relative;
        width: 100%;
        max-width: 360px; /* 원하는 최대 너비 설정 */
        margin: 0 auto;
    }

    .shorts-container iframe {
        width: 100%;
        aspect-ratio: 9 / 16; /* 세로 영상 비율 설정 */
        height: auto;
        display: block;
    }
</style>

 

 

 

 

위 코드를 복붙해서 html에 넣으면 되는데,

여기서 주의할 점이 있다!

 

저 src 링크 주소 부분에 쇼츠 영상 url을

그냥 복붙하면 안 된다.

 

아무 생각 없이 복붙할 경우 이렇게 뜬다.

 

연결 거부 무엇?

 

 

 

 

 

 

이때 필요한 건 임베드 링크! 

임베드 링크를 얻기 위해 영상 소스 코드를 복사해야 한다.

 

쇼츠 영상 위 우클릭 - 소스 코드 복사를 클릭!

 

 

 

 

 

그다음 메모장 같은 것에 붙여넣기하면 아래처럼 뜨는데

우리가 필요한 부분은 중간에 embed가 들어간 부분이다.

 

저 "" 안에 들어간 주소를 복사해 준다.

 

 

음영 들어간 부분 복사

 

 

그런 뒤 위 html 코드 안 src에 붙여넣기 하면

아래처럼 pc, 모바일 모두 세로로 뜨는 걸 확인할 수 있다.

 

 

 

 

 

오늘도 이렇게 티스토리 지식을 얻어갑니다 +1