수익형블로그

[블로그tip] 유튜브 동영상 첨부시 썸네일 불러오기

Sstube Tistory 2017. 4. 27. 11:28
반응형

블로그에 유튜브 동영상만 첨부하면 블로그 메인화면 또는 글목록 화면에 썸네일이 보이지 않습니다. 그렇다고 본문에 유튜브 썸네일 사진을 추가 첨부하면 본문의 내용이 지저분?해질 수 있습니다. 지금 포스팅 된 본문에서는 아래 동영상만 보여지며 사진이 첨부되지 않는 것처럼 보입니다. 제 블로그의 글목록에 가시면 유튜브 썸네일이 보여지는 것을 확인할 수 있는데요. 아래와 같이 본문에는 유튜브 동영상만 메인화면에는 썸네일이 보여지도록 설정해보겠습니다. 


youtube thumbnail



블로그 본문에는 동영상만, 메인화면에는 썸네일이 보이게 설정하기


1. 본문에는 유튜브 영상을 첨부합니다.


2. 유튜브 고유주소를 이용하여 썸네일 주소를 추출합니다. 


유튜브 고유주소는 "https://youtu.be/고유주소" 입니다.



유튜브, 비메오 썸네일 추출 주소 - http://php5.me/thumbmaker


썸네일 추출해주는 사이트로 접속하셔서 고유주소를 입력하여 썸네이 주소를 복사합니다.


3. 티스토리 경우 사진첨부란에 썸네일 주소를 입력 후 사진올리기를 클릭합니다.

(파일형식이 아닌 URL주소를 입력하여도 사진이 첨부됩니다!!)


4. 썸네일 주소 첨부 후 글쓰기 상단에 있는 HTML를 체크합니다. 


HTML에서 이미지 첨부 주소를 찾아 중간에 "display:none"를 입력하시면 됩니다.





사진을 첨부하였지만 본문에서는 보여지지 않습니다. 


설명 끝!!


유튜브영상을 꼭 첨부하지 않더라도 사진을 썸네일에만 보여지고 싶을 때, 사용하시면 유용할 것 같네요. 

설명 핵심은 이미지 태그에 display: none 를 입력하는 것입니다.


참고자료 : http://mrjjang.tistory.com/38

반응형