티스토리에 유튜브 영상을 넣을 때, 정해진 사이즈대로 넣는 방법이 있고, 현재 글 작성하는 가로 사이즈에 꽉 차게 자동조절되어 넣는 방법이 있다. 이 부분이 바로 반응형에 대한 부분으로, 기왕이면 꽉꽉 들어차게 넣는 방법이 좋을 것 같다. 어떻게 하는건지 알아보자.
가로로 가득차게 넣는 방법은 우선 두 가지 종류가 있다. 첫번째는 유튜브의 HTML 코드를 수정해서 넣는 방법이 있고, 두번째는 티스토리에서 제공하는 플러그인을 활용하는 방법이 있다. 우선 가장 기본이되는 유튜브를 넣는 방법에 대해서 먼저 습득하고 이 글을 읽으시면 좀 더 이해하시는데 도움이 될 것이다.
일반적인 방법은 저 위에 작성된 글대로 넣으면 되지만, 기왕이면 꽉꽉 체워 넣는 영상이 반응형이기에 어떠한 디바이스에서도 사이즈가 알아서 조절되어 나타나게 되기 때문에 오류도 거의 없고 보기 편할 것이다.
우선 HTML을 수정한 방법이다. 유튜브에 가셔서 티스토리에 넣고자 하는 영상을 선택하고, 공유를 누르면 위의 화면처럼 공유 주소가 나온다. 여기서 필요한 부분은 저기 빨간색 줄이 표시된 부분이다. 나머지 앞 부분은 유튜브 고유 도메인 이므로 필요가 없고, 순수한 영상 주소만 필요하다. 이 부분을 메모장에 잘 복사해두고, 아래의 첨부파일을 다운받아서 열어보자.
첨부파일을 다운받아 열어보면 위와같은 다소 복잡한 코드들이 보인다. 여기서 필요한건 바로 저기 검정색 동그라미 부분만 수정해주면 되는데, 아까 유튜브 고유 주소코드를 여기 동그라미와 바꿔주면 된다. 이렇게 수정된 유튜브 주소를 티스토리의 외부컨텐츠 기능을 활용해서 넣어본다.
현재 이 영상은 640x360 사이즈로 코드 수정없이 넣은 유튜브 동영상이다.
이 영상은 방금 수정한 HTML 코드를 활용하여 넣은 유튜브 동영상이다. 기본 사이즈가 현재 여기 블로그에 맞게 꽉 차있다. 이게 훨씬 더 보기 좋다.
다음 방법은 플러그인 유튜브 영상 넣는 기능을 활용하여 진행해본다. 개인적으로 이 방법은 잘 사용하지 않는다. 위의 방법이 훨씬 빠르고 쉽기 때문이다. 플러그인 방법은 자동으로 가운데 정렬이 되어 버려서 수동으로 다시 좌측정렬을 한번 더 해줘야 하는 불편함이 있다.
티스토리에서 글 작성 시, 오른쪽에 플러그인을 살펴보면 YouTube 라고 보인다. 만약 이게 안보이면 플러그인 설정에서 유튜브 동영상 넣기 기능을 활성화 해야 한다. 한번 눌러보자.
유튜브 공유 주소를 입력하고 검색을 누르면 해당 동영상이 나온다. V체크를 먼저 해주고, 오른쪽에 사이즈 설정 부분에서 원래 설정했던 크기를 선택하면 해당 크기로 나오고, 꽉차게 넣으려면 저기 빨간색 상자로 표시가 된 "에디터너비" 를 선택해주고 등록 버튼을 누르면 된다.
이건 기존 사이즈였던 640px 을 선택했을때의 유튜브 동영상 모습이다. 가운데 정렬이 되어 있기 때문에 좌측 정렬을 한번 더 해주었다.
이건 에디트너비 모드로 선택해서 동영상을 등록한 모습이다. 보시면 아시겠지만, 중앙정렬의 불편함 뿐만 아니라, 메인화면 일부가 잘리는 현상도 발생한다. 따라서 플러그인으로 넣는 방법 보다는 HTML을 수정해서 티스토리 외부컨텐츠로 넣는 수동 방법으로 진행하는 것을 추천한다. 아직까지는 플러그인이 유튜브와 완벽 호환이 되지 않아서 발생하는 문제같다. 동영상 재생 시에는 화면 잘림 없이 정상적으로 나온다.
이렇게 두 가지 방법으로 유튜브 영상을 티스토리 가로 사이즈에 꽉차게 넣는 방법을 알아봤다. 각자 스타일에 맞는 방법을 선택해서 적절하게 유튜브 동영상을 넣어보도록 하자. 끝.