티스토리 블로그 유튜브 동영상 가운데 정렬 및 주의사항

블로그에 체류시간을 늘리고, 광고 클릭을 유도하기 위한 방법으로 동영상을 넣는 경우가 많이 있습니다. 간편하게 동영상을 넣는 방법은 유튜브를 이용하는 것인데, 티스토리 블로그에서는 유튜브 동영상을 가운데로 정렬을 할 수가 없습니다. 간단한 코드를 사용해서 유튜브 동영상을 가운데 정렬하는 방법과 주의사항을 알아보도록 하겠습니다.

 

 

1. 티스토리에 유튜브 동영상 코드 가져오기

유튜브에서는 다양하게 SNS에 공유할 수 있도록 방법을 제공하고 있습니다. 이 방법 중에 티스토리 블로그에 사용할 수 있는 방법은 두 가지가 있습니다.

유튜브 구독 버튼 위에 "공유"를 누른 다음 "퍼가기"나 "복사"를 눌러서 동영상을 공유한다.

1) URL "복사"

위 사진의 우측 1번을 보면 해당 동영상의 주소를 복사하는 기능이 있습니다. 이 주소를 복사해서 아래와 같이 붙여 놓고 엔터를 치면 동영상이 공유가 됩니다

- 장점 :

대표 화면의 이미지를 쉽게 티스토리 에디터의 가운데 정렬 기능을 통해서 가운데 정렬이 가능합니다.

- 단점 :

다른 웹사이트를 공유하는 것 같이 URL 주소를 공유하는 방식으로 동영상이 블로그에서 바로 재생이 되지 않는 경우가 있습니다. 또한, 데스크톱에서는 브라우저 팝업 창을 띄우거나, 모바일에서는 유튜브 앱으로 넘어가야 동영상을 볼 수 있습니다. 또한 디자인상 URL을 지우면 또한 재생이 되지 않는 경우가 있습니다. 가져오는 동영상에 따라서 조금씩 다릅니다.

- 예시화면

https://youtu.be/jeQnD0Sq4VU

2) "퍼가기, embed"

위 사진의 우측 2번 "퍼가기, embed" 기능을 유튜브 동영상 코드를 가져올 수 있습니다. HTML 코드로 티스토리 html 모드의 편집기에서 원하는 위치에 붙여 넣으면 됩니다.

- 장점 :

블로그 화면 내에서 유튜브 플레이가 작동을 하여 별도의 화면이나 유튜브 앱이 필요 없이 동영상을 확인할 수 있습니다.

- 단점 :

유튜브 동영상의 가운데 정렬이 자동으로 되지 않습니다. 데스크톱의 경우는 왼쪽으로 치우쳐 보이고, 모바일의 경우는 크게 문제 되지 않습니다.

-예시 화면

 

 

2. 티스토리 블로그에 동영상 가운데 정렬

"퍼가기, embed"기능을 통해서 유튜브 비디오를 가져왔을 경우에 티스토리 블로그에서 가운데 정렬을 하는 법입니다. 생각보다 쉽습니다. <div align="middle">...</div> 코드를 사용해 주시면 됩니다.

1) "퍼가기" 코드 복사

퍼가기 메뉴를 누르면 코드와 함께 메뉴창이 다시 뜨는데 그냥 복사하시면 됩니다.

우측 하단 복사를 누르면 위에 HTML 코드가 복사됩니다.

2) 코드 수정해 주기

퍼오기 메뉴에서 가져온 코드를 그냥 사용을 하게 되면, 가운데 정렬이 되지 않을 뿐더러, 포스팅 수정 시 재생이 되지 않는 경우가 있습니다. 소위 광고 코드 깨지듯이 동영상 코드도 깨집니다. 주의해야 할 부분입니다. 때문에 코드를 조금 추가시켜 줍니다.

<div align="middle">
<iframe width="560" height="315" src="https://www.youtube.com/embed/oDyHXXd9zaw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

붉은색 코드가 추가된 부분입니다. 간단합니다. 이 코드는 유튜브 동영상을 티스토리 블로그에서 가운데 정렬을 시켜주면서, 포스팅 수정 시 코드가 깨지지 않게 보호해 줍니다. 이렇게 완성된 코드를 HTML 모드 화면에서 원하는 곳에 붙여넣기 하시면 됩니다.

3) 예시 화면

가끔 에디터에서는 가운데 정렬이 되지 않을 때가 있지만, 미리보기나 포스팅된 화면에서는 동영상 가운데 정렬이 제대로 작동을 합니다.

 

 

3. 주의사항

유의점의 위에 글에 설명한서 단점으로 이야기 해 드렸습니다. 다시 정리해 드리면,

1) div 코드 사용

다른 블로그를 살펴 보면 "<p align="middle"></p>"로 알려주는 블로그가 있는데, 티스토리에서 이 코드를 사용 안해본 블로거입니다. 100% 깨집니다. "p" 대신 "div"를 사용해 주어야 합니다.

2) URL 삭제 금지

동영상을 URL 로 공유할 때 디자인이 이쁘지 않아서 지우면 재생으로 넘어가지 않는 경우가 발생합니다. 이점은 문서 공유와 다른 점입니다. 이전글 공유의 경우는 URL을 지우고, 박스만 클릭을 해도 해당 문서로 넘어가지만, 유튜브 동영상은 아닙니다. 혹시라도 지우웠다면, 포스팅 후 동영상이 잘 작동하는지 꼭 확인을 해 보시기 바랍니다.

3) Center 사용

<div align="middle">대신에 <div align="center">를 사용해도 됩니다. 상관없습니다.
참고로, 우로 정렬은 right, 좌로 정렬은 left를 넣으시면 됩니다

4) 미리보기

동영상의 가운데 정렬 확인은 꼭 미리보기에서 하시는 것을 추천드립니다. 에디터 상에서는 잘 안타날 수 있습니다.

5) 클립 기능

얼마전 부터 유튜브에서 클립 기능을 제공하고 있습니다. 클립 기능은 가위그림이 있는 버튼을 누르면 재생하고 있는 동영상의 특정 부분만 잘라내서 공유할 수 있는 기능입니다. 이 기능을 사용하때는 위에 두번째 예시인 '퍼가기embed" 방법을 사용하셔야 가운데 정렬뿐만 아니라, 포스팅 내 재생이 원할하게 이루어집니다.

3. 마치며

티스토리 유튜브 동영상 가운데 정렬은 솔직히 해도 그만 안 해도 그만인 거 같습니다. 하지만, 위에 공유하는 방법에 따라서 화면이 바뀌어서 재생이 되고, 바로 재생이 되고 하는 차이는 블로그를 하는 입장에서는 체류시간, 이탈률 등을 통한 큰 차이가 될 수 있습니다. 물론 광고 수익면에서도 차이가 생길 것입니다. 이제 이미지보다 동영상이 더 쉽습니다.

* 위 1번 URL을 가져 오는 방법이 잘 안되어서 공부한 내용인데, 이 블로그 작성에서는 정말 잘 작동을 합니다. 힘이 빠지는 포스팅입니다. 아무트 동영사을 공유하는 방법에 두 가지고 있으며, 첫 번째 방법이 매우 쉽습니다. 다만, 잘 작동하지 않는 경우 두 번째 방법을 사용하시는 것을 추천드립니다.
티스토리 블로그 본문상단 GTranslate 외국어 번역기 달기

티스토리 블로그 본문상단  GTranslate 외국어 번역기 달기

포토스케이프X, 블로그 이미지 편집을 위한 콜라주 마스터

포토스케이프X, 블로그 이미지 편집을 위한 콜라주 마스터

티스토리에 유튜브 공유하기