HTML 유튜브 쇼츠화면 꽉차게 하는 방법

블로그에 유튜브 쇼츠 화면을 꽉차게 업로드 하는 방법을 알려드리겠습니다.

 

블로그에 유튜브 쇼츠 화면 꽉차게 하는 방법

1. 유튜브 쇼츠 동영상의 링크를 복사합니다. 예를 들어 지식인 질문의 쇼츠.

https://www.youtube.com/embed/Meqno6_4eYM

 

2. 블로그에 CSS 코드를 입력하는 곳에 아래와 같은 코드를 붙여넣습니다.

.shorts-container {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 177.78%;
}

.shorts-iframe {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 border: none;
}

 

3. 블로그 포스팅 본문의 HTML 코드를 입력하는 곳에 아래와 같은 코드를 붙여넣습니다.

<div class="shorts-container">
 <iframe class="shorts-iframe" src="https://www.youtube.com/embed/Meqno6_4eYM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
 </iframe>
</div>

 

4. 이때, src 속성의 값은 복사한 쇼츠 링크로 바꿔줍니다.

 

5. 미리보기나 게시하기를 하면 쇼츠 화면이 블로그에 세로로 꽉 차게 나타납니다.

 

이 방법은 css 스타일을 사용하여 쇼츠 동영상을 감싸는 div 요소의 크기를 비율로 지정하고, iframe 요소를 절대 위치로 설정하여 div 요소에 맞게 조정하는 방식입니다.

 

성공하셨길 바랍니다.

**주의: 티스토리 블로그의 경우 HTML 편집창에서 기본모드로 변환하면 코드가 지워지는 현상이 있기 때문에 HTML 편집창에서 완료하고 저장해야 합니다**