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

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

  1. 새 에디터의 링크 가져오는 기능 이용하기
  2. 티스토리가 제공하는 플러그인을 이용하기
  3. 유튜브가 제공하는 코드 복사하여 붙여넣기

첫번째 방법이 제일 쉽고 편리합니다. 단점은 새 에디터에서만 된다는 것이죠. 즉, 새 에디터를 사용한다면 1번 방법을 사용하고, 구 에디터를 사용한다면 2번 또는 3번 방법을 사용하세요. 물론 새 에디터에서도 2번 또는 3번 방법을 사용할 수 있습니다.

새 에디터에서 링크 가져오기

티스토리의 새 에디터에는 링크를 입력했을 때 그 링크에 있는 일부 정보를 가져와서 보여주는 기능이 있습니다. 이를 이용하여 유튜브 영상도 넣을 수 있습니다.

  • 유튜브 영상의 주소를 복사합니다. 주소 표시줄에 있는 URL을 복사해도 되고, 공유 링크를 복사해도 됩니다.

  • 새 에디터에서 주소를 붙여넣고 엔터키를 누르면...

  • 유튜브 영상이 본문에 들어갑니다.

  • 이제 URL을 지우면 동영상만 남습니다.

  • 유튜브 동영상을 마우스로 한 번 클릭하면, 정렬이나 크기를 바꿀 수 있습니다. 동영상 밑에 설명을 넣을 수도 있구요.

  • 에디터에서 보이는 모습과 실제 블로그에서 보이는 모습은 다릅니다. 스킨에 있는 CSS 또는 JavaScript 코드가 유튜브 영상의 모양을 정하기 때문입니다.

유튜브 동영상 넣기 플러그인 이용하기

플러그인 활성화

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

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

새 에디터에서 플러그인 사용하기

  • 오른쪽 위에 있는 점 세 개 아이콘을 클릭하고, 플러그인의 YouTube를 클릭합니다.

  • 유튜브 동영상을 검색합니다. 키워드 뿐만 아니라 유튜브 주소로도 검색 가능합니다. 본문에 넣으려는 영상이 정해졌다면 URL로 검색하는 게 빠릅니다.

  • 동영상을 선택하고 [등록]을 클릭하면...

  • 유튜브 영상이 삽입됩니다.

구 에디터에서 플러그인 사용하기

  • 구 에디터 오른쪽 아래에 [플러그인]을 확장하고 YouTube를 클릭합니다.

  • 유튜브 동영상을 검색합니다.
  • 원하는 동영상에 체크하고, 사이즈를 설정한 후 [등록] 버튼을 클릭하면...

  • 유튜브 영상이 추가됩니다.

유튜브에서 코드 복사하여 붙여넣기

  • 유튜브 영상의 [공유]를 클릭합니다.

  • [퍼가기]를 클릭합니다.

  • [복사]를 클릭하여 코드를 복사합니다.

  • 에디터의 HTML 모드로 들어가서 복사한 코드를 붙여넣습니다.

유튜브 영상을 반응형으로 넣는 방법

유튜브 영상을 넣는 코드를 보면 보통 크기가 정해져 있습니다. 그래서 웹브라우저의 가로폭을 줄이거나 모바일로 접속하면 화면을 벗어납니다. 그것을 CSS 또는 JavaScript를 이용해서 출력되는 화면의 크기에 맞게 나오도록 조정합니다.

최신 스킨은 대부분 그 코드를 포함하고 있어서 별도의 작업이 필요하지 않습니다. 만약 스킨이 지원하지 않는다면 다음 코드를 사용하세요.

<div style="position: relative; height:0; padding-bottom: 56.25%; margin: 40px 0px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; width:100%; height:100%;"></iframe>
</div>

빨간색으로 되어 있는 유튜브 주소만 바꿔주면 됩니다. 자세한 내용은 여기에 있습니다.

티스토리 강좌

상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) (문의는 메일로 해주세요.) E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침