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

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

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

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

 

 

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

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

 

 

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. 유튜브 링크(사진 오른쪽에서 두번째)를 건다.