티스토리 강좌 | 유튜브(YouTube) 동영상 넣는 방법

티스토리에 유튜브 동영상 넣는 방법은 두 가지가 있습니다.

  • 티스토리가 제공하는 플러그인을 이용하기
  • 유튜브가 제공하는 코드 복사하여 붙여넣기

어떤 방식으로 해도 입력되는 코드는 거의 같습니다. 티스토리에서 글을 작성하다가 유튜브 동영상을 넣고 싶을 때는 첫번째 방법이 편하고, 유튜브 사이트에서 좋은 동영상을 발견하여 티스토리 글에 넣고 싶을 때는 두번째 방법이 편합니다. 

플러그인 이용하기

플러그인에서 유튜브로 검색하면 유튜브 동영상 넣기라는 플러그인이 나옵니다.

플러그인을 클릭하면 팝업창이 나오는데, [적용]을 클릭하여 활성화시킵니다.

유튜브 동영상 넣기 플러그인이 활성화되면 에디터 오른쪽에 유튜브라는 메뉴가 생깁니다.

클릭하면 팝업창이 나오고, 거기서 유튜브 동영상을 검색할 수 있습니다.

원하는 동영상에 체크하고, 사이즈를 설정한 후 [등록] 버튼을 클릭합니다. 사이즈는 보통 에디터너비가 좋습니다.

동영상 내용을 확인하고 싶다면 동영상 목록에 있는 이미지를 클릭하면 됩니다.

동영상이 삽입된 화면입니다.

블로그에도 잘 나옵니다.

반응형을 고려하지 않은 코드가 삽입되어 화면의 가로폭이 줄어도 동영상이 줄어들지 않고 본문 폭을 넘어가게 됩니다. 이를 방지하는 방법은 CSS에 다음의 코드를 추가하는 것입니다.

정확히 반응형으로 작동하는 것은 아니지만, 본문 가로폭을 넘어가는 일은 없습니다.

유튜브 사이트에서 코드 복사하기

유튜브 동영상 아래에 공유 메뉴가 있습니다.

[공유]를 클릭한 후 [퍼가기]를 클릭합니다.

코드를 복사합니다.

HTML 모드에서 코드를 붙여 넣습니다.

참고

JB SKIN은 유튜브 동영상을 반응형으로 넣는 기능을 포함하고 있습니다. 가로폭이 변해도 정확히 비율을 유지한 채 크기가 변합니다.

반응형 티스토리 스킨을 찾으시나요?
상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) E-MAIL : jb.jbfactory@gmail.com 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : NAVER Business Platform 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침