3. [티스토리] 유튜브 동영상 첨부할때 블로그 가로 크기에 맞게 자동 적용하기

유튜브 동영상 블로그 페이지 크기에 맞게 적용하기

플러그인 기능을 활용해 유튜브 동영상을 첨부할때 720px(1280(?)x720)의 큰 사이즈로 선택을 하면 썸네일 화면 좌,우측이 잘리는 현상이 발생했습니다.

원인은 제 블로그의 가로 최대 크기가 900px로 설정 되어 있기때문이었습니다.

이 가로 최대 픽셀은 적용된 스킨에 따라서 다릅니다.

확인 방법은 관리 페이지에서 "콘텐츠" ->"설정" 항목에서 확인이 가능합니다.

이 수치를 더 크게 변경 적용해 문제를 해결 할 수도 있지만 900px보다 넓은 본문은 원하지 않았습니다.

본문 크기를 늘리지 않고 유튜브 동영상을 가로 사이즈에 맞추려면 글쓰기의 HTML 모드를 이용하시면됩니다.

적용 방법

1. 글 쓰기 페이지에서 HTML 체크박스에 체크해 줍니다.

2. 아래의 소스코드를 본문에 붙여 넣기합니다.

<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/주소?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>

3. 첨부하려는 유튜브 영상에서 공유를 누른 후, 나타난 주소 중 마지막 / 뒷부분의 주소를 복사해 줍니다.

4. 글쓰기 페이지로 돌아와 "주소" 부분에 덮어쓰기 합니다.

5. HTML 체크박스의 체크를 해제 해줍니다.

6. 다음과 같이 잘리지 않고 가로 크기에 맞게 동영상이 첨부 됐습니다.

다음에 영상을 첨부할 경우에도 마찬가지로 2번 항목의 소스 코드를 적용해 첨부하시면 자동으로 가로 크기에 맞게 적용됩니다.