티스토리 모바일에서 유튜브 반응형 크기 조절방법

 

 
네이버 블로그는 유튜브 동영상을 첨부하면 PC, 모바일 자동으로 사이즈를 맞춰줘서 편했는데 티스토리는 사이트 크기에 따라서 직접 맞춰야 합니다.

하지만, 일부 스킨에서 유튜브 반응형 코드를 입력해도 모바일에서는 계속해서 동영상이 잘린 상태로 보여지는데 한참 찾다가 드디어 알아냈습니다.

📱 모바일 유튜브 잘림 현상

 

PC에서는 유튜브 동영상 사이즈가 맞았지만 모바일에서는 제대로 나오지 않았습니다. 사진처럼 반으로 잘린 상태로 보였죠. 기기는 아이폰, 브라우저는 사파리를 사용합니다.

반응형 소스나 HTML에서 코드를 넣어봤지만 달라지는건 없었습니다. 아마 일부 스킨에는 적용되지 않는 것 같습니다. 그래서 계속 찾다가 괜찮은 사이트를 발견했습니다.

💻 모바일 반응형 코드생성

 

Embed Responsively 사이트에서 반응형 코드를 생성할 수 있습니다. 유튜브 주소를 입력하면 자동으로 코드를 생성해줘서 편리합니다.

 

http://embedresponsively.com

embedresponsively.com

사이트에 접속해서 유튜브 페이지 URL만 입력하면 자동으로 코드를 생성해줍니다.
따로 HTML에 코드를 입력하지 않아도 됩니다.

 

그럼 이렇게 코드가 나오는데 복사해서 본문에 입력해주시면 됩니다. 본문에 입력할 때는 HTML 모드로 들어가셔서 코드를 입력하시면 됩니다.

📝 샘플 코드

 

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/주소' frameborder='0' allowfullscreen>
</iframe>
</div>

유튜브 반응형 소스.txt

0.00MB

 

샘플코드에서 자신의 유튜브 주소만 입력하면 됩니다. 전체 주소를 입력하는게 아니라 유튜브 동영상 주소 마지막에 코드만 입력해주시면 됩니다.

* 예시

https://youtu.be/7a3bmV9cKWM

 

유튜브 URL에서 / 뒤에 있는 코드가 주소입니다.

설명해드린 주소에서는 '7a3bmV9cKWM' 부분이 주소가 되겠죠.
샘플코드는 파일을 첨부해뒀으니 자유롭게 다운받으시면 됩니다. (주소 부분만 수정하시면 됩니다.)

🗂 서식 저장

티스토리 서식 기능을 사용하면 조금 더 빨리 코드를 입력할 수 있습니다. 서식 쓰기를 클릭하신 후에 HTML 모드로 붙여넣기 하시면 됩니다. 그리고 게시글을 작성할 때 서식을 불러와서 주소만 수정해주시면 간편하게 티스토리 유튜브 반응형 크기로 맞춰서 게시글을 올릴 수 있습니다.

 

 

 

📺 샘플 반응형 동영상

 

이렇게 티스토리에서도 유튜브가 모바일 크기에 맞춰서 나옵니다. HTML 반응형 소스 등을 시도해봐도 적용이 안되시면 이 방법을 사용해서 동영상을 첨부해보세요!

 

 

 

 

네이버 서치어드바이저 수집보류 해결방법

 

애드센스 외화통장 국민은행 수수료 및 후기

 

초록괴물