티스토리에 유튜브 동영상 첨부시 가로 사이즈 꽉 차게 넣는 방법

티스토리에 유튜브 영상을 넣을 때, 정해진 사이즈대로 넣는 방법이 있고, 현재 글 작성하는 가로 사이즈에 꽉 차게 자동조절되어 넣는 방법이 있다. 이 부분이 바로 반응형에 대한 부분으로, 기왕이면 꽉꽉 들어차게 넣는 방법이 좋을 것 같다. 어떻게 하는건지 알아보자.



피가되고 살이되는 블로그, 친절한효자손 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#

#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#


티스토리에 유튜브 영상을 가로 픽셀 사이즈에 맞게끔 넣어보자!


가로로 가득차게 넣는 방법은 우선 두 가지 종류가 있다. 첫번째는 유튜브의 HTML 코드를 수정해서 넣는 방법이 있고, 두번째는 티스토리에서 제공하는 플러그인을 활용하는 방법이 있다. 우선 가장 기본이되는 유튜브를 넣는 방법에 대해서 먼저 습득하고 이 글을 읽으시면 좀 더 이해하시는데 도움이 될 것이다.


일반적인 방법은 저 위에 작성된 글대로 넣으면 되지만, 기왕이면 꽉꽉 체워 넣는 영상이 반응형이기에 어떠한 디바이스에서도 사이즈가 알아서 조절되어 나타나게 되기 때문에 오류도 거의 없고 보기 편할 것이다.



우선 HTML을 수정한 방법이다. 유튜브에 가셔서 티스토리에 넣고자 하는 영상을 선택하고, 공유를 누르면 위의 화면처럼 공유 주소가 나온다. 여기서 필요한 부분은 저기 빨간색 줄이 표시된 부분이다. 나머지 앞 부분은 유튜브 고유 도메인 이므로 필요가 없고, 순수한 영상 주소만 필요하다. 이 부분을 메모장에 잘 복사해두고, 아래의 첨부파일을 다운받아서 열어보자.


첨부파일

자동 가로 사이즈 유튜브 동영상 넣기.txt




첨부파일을 다운받아 열어보면 위와같은 다소 복잡한 코드들이 보인다. 여기서 필요한건 바로 저기 검정색 동그라미 부분만 수정해주면 되는데, 아까 유튜브 고유 주소코드를 여기 동그라미와 바꿔주면 된다. 이렇게 수정된 유튜브 주소를 티스토리의 외부컨텐츠 기능을 활용해서 넣어본다.




현재 이 영상은 640x360 사이즈로 코드 수정없이 넣은 유튜브 동영상이다.




이 영상은 방금 수정한 HTML 코드를 활용하여 넣은 유튜브 동영상이다. 기본 사이즈가 현재 여기 블로그에 맞게 꽉 차있다. 이게 훨씬 더 보기 좋다.


다음 방법은, 플러그인 유튜브 영상 넣는 기능을 활용하여 진행해본다. 개인적으로 이 방법은 잘 사용하지 않는다. 위의 방법이 훨씬 빠르고 쉽기 때문이다. 플러그인 방법은 자동으로 가운데 정렬이 되어 버려서 수동으로 다시 좌측정렬을 한번 더 해줘야 하는 불편함이 있다.





티스토리에서 글 작성 시, 오른쪽에 플러그인을 살펴보면 YouTube 라고 보인다. 만약 이게 안보이면 플러그인 설정에서 유튜브 동영상 넣기 기능을 활성화 해야 한다. 한번 눌러보자.




유튜브 공유 주소를 입력하고 검색을 누르면 해당 동영상이 나온다. V체크를 먼저 해주고, 오른쪽에 사이즈 설정 부분에서 원래 설정했던 크기를 선택하면 해당 크기로 나오고, 꽉차게 넣으려면 저기 빨간색 상자로 표시가 된 "에디터너비" 를 선택해주고 등록 버튼을 누르면 된다.




이건 기존 사이즈였던 640px 을 선택했을때의 유튜브 동영상 모습이다. 가운데 정렬이 되어 있기 때문에 좌측 정렬을 한번 더 해주었다.



이건 에디트너비 모드로 선택해서 동영상을 등록한 모습이다. 보시면 아시겠지만, 중앙정렬의 불편함 뿐만 아니라, 메인화면 일부가 잘리는 현상도 발생한다. 따라서 플러그인으로 넣는 방법 보다는 HTML을 수정해서 티스토리 외부컨텐츠로 넣는 수동 방법으로 진행하는 것을 추천한다. 아직까지는 플러그인이 유튜브와 완벽 호환이 되지 않아서 발생하는 문제같다. 동영상 재생 시에는 화면 잘림 없이 정상적으로 나온다.

이렇게 두 가지 방법으로 유튜브 영상을 티스토리 가로 사이즈에 꽉차게 넣는 방법을 알아봤다. 각자 스타일에 맞는 방법을 선택해서 적절하게 유튜브 동영상을 넣어보도록 하자. 끝.


"친절한효자손 취미생활" 을 검색!


이 글을 공유하기

댓글(11)

  • 2017.09.21 00:45 신고

    오~이거 정말 유용한 팁인데요. 전 코드가 따로 있는 줄도 모르고 일단 기본 사이즈로 불러오고 HTML에서 width와 height 값을 수동으로 바꾸어주곤 했는데 덕분에 이런 수고가 덜어질 거 같습니다. 알려주셔서 감사합니다. ^^

  • 2017.09.21 00:53 신고

    그런데 어차피 꽉 차면 가운데 정렬이나 왼쪽 정렬이나 똑같이 보이지 않나요? 암튼 덕분에 에디터에서 바로 적용해보았습니다,

    • 2017.09.21 00:54 신고

      맞습니다^^ 그냥 꽉차는데 의의를 두는 것이죠.ㅎㅎ 하지만 반응형으로 꽉차게 넣으면, 어떤 해상도에서 보시던지 영상 일부가 잘려서 나오지 않습니다.

  • 2017.09.27 13:38 신고

    아하.!! 이렇게 하는거였군요. ㅎㅎ

  • 2017.11.27 23:23 신고

    음 정말좋고 필요한 정보인데
    소스를 넣으면 영상 아래 글들을 먹어버리는데
    그 부분 해결할수 없을까요..

  • 2017.11.29 11:32 신고

    네 잘되긴하는데 글수정하기위해 수정화면으로 들어갈경우 아랫글들을 다가려버리더라고요ㅎ 혹시나 해서 여쭤봤어요

  • 2018.08.05 03:50 신고

    저는 유튜브 영상을 쓰면 블로그에서 전체화면이 안되거든요? 혹시 따로 설정해야 하나요?

Designed by JB FACTORY