hi098123 Tistory Tip

티스토리 이미지 유튜브 링크 꾸미기

흔히 유튜브를 공유할때 퍼가기 기능을 이용해서 공유를 합니다.

그러나, 이렇게 공유시 유튜브 리소스를 로딩하여 사이트 속도가 약간 저하될 수 있는데

사이트 내에서 영상을 재생해야하는 경우 위 방법을 어쩔수 없지만 사용해야됩니다.

 

 

유튜브로 이동하여 시청하게 할 때

이 글은 사이트(또는 티스토리 블로그) 외부로 나가 유튜브에서 시청하도록 하는 경우에만 해당됩니다.

 

 

HTML구조가 아래와 같을때

(일반적인 티스토리 이미지 구조)

  • figure
    • a
      • img

 

CSS를 아래와 같이 설정합니다.

figure>a[href*="//www.youtube.com"]:before, figure>a[href*="//youtube.com"]:before, figure>a[href*="//youtu.be"]:before{
	position: absolute;
    content: '';
    width: 68px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba(33,33,33,.7)'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}
figure>a[href*="//www.youtube.com"]:hover:before, figure>a[href*="//youtu.be"]:hover:before, figure>a[href*="//youtube.com"]:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}

 

 

 

 

미리보기

유튜브에 스펀지가 떠있길래 이걸로 테스트해봤다.

이미지에 유튜브 링크를 걸면 아래처럼 보이게 된다. (현재 유튜브 공유 디자인과 동일)

 

 

 

이미지 링크 설정방법

  1. 이미지를 올리고
  2. 유튜브 링크(사진 오른쪽에서 두번째)를 건다.


저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.

링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요

댓글 0개