썸네일 사진에 재생 버튼 만들기

예전에 부트스트랩 소스에서 동영상 재생을 버튼을 만드는 것을 2015/12/04 - 부트스트랩 소스,동영상 표시 아이콘 나타내기에서 다루었습니다. 이번에는 부트스트랩을 사용하지 않고 아래와 같이 동영상 재생 버튼이 나오게 하는 것입니다. 그런데 익스플로러 7,8에서 보이는지 모르겠네요. 재생 이미지가 이미지 위에 있게 하는 것입니다. 썸네일에 동영상 버튼이 없으면 사진인지 동영상인지 알 수 없으나 재생 버튼이 있어서 아래 나오는 동영상이라는 것을 단번에 파악할 수 있을 것입니다.

미리보기는 아래를 보거나 이 블로그 사이드바 동영상을 클릭하면 나타나는 MORE 버튼을 눌러 볼 수도 있습니다. 동영상은 클릭하면 모달이라는 새창에 재생되는데 부트스트랩 모달에 대해서는 복잡해서 나중에 기회가 있으면 다루겠습니다. 

 

 

소스를 제공한 곳의 페이지를 보니 CSS3에 나오는 background-size를 이용하는 것 같은데 background-size 수치를 조절하면 된다고 합니다. 이 블로그 사이드바는 background-size 속성을 삭제했습니다. 아래에서 간단히 소스를 설명하겠으면 소스는 더보기 안에 있습니다. 그래서 더보기 안에 소스를 귀찮게 소스를 넣는데 그래도 퍼갈 놈은 퍼가더라고요. 예전에 어떤 X같은 퍼갔다는 티가 나는데도 퍼가더라고요. 퍼가는 놈을 막을 수 없습니다. 

HTML

아래는 HTML 소스인데 유튜브에서 썸네일을 가져오는 것은 2015/08/25 - 유튜브 동영상, 썸네일 가져오기에서 자세히는 아니고 간단히 다룬 적이 있습니다. 주소에서 아이디만 변경하면 되는 단순한 작업입니다. 알면 쉽고 모르면 어렵습니다. 티스토리 글에 아래 HTML 소스를 그대로 올리면 <span></span>이 없어지니 저는 <span>&nbsp;</span>이라고 했습니다. 참고로 &nbsp;는 공백입니다. 

<div class="videos">

    <a href="http://www.youtube.com/watch?v=jqZ2Ie4pd30" class="video">

        <span></span>

        <img src="http://i1.ytimg.com/vi/jqZ2Ie4pd30/maxresdefault.jpg">

    </a>

</div>

CSS

여기에서 중요한 것은 background-size 수치인데 이 수치는 알아서 조절하세요. 저는 background-size를 20%로 했고 원 소스는 300%로 했습니다. 그리고 아래 빨간 부분인 background가 재생 버튼 이미지으로 뒤에 있는 썸네일이 보여야 하는 투명 이미지야 하니 투명인 GIF이나 PNG야 합니다. 참고로 JPG는 투명이 불가능합니다. 위 HTML 소스를 보면 재생 버튼인 span이 썸네일 보다 위에 있다는 것을 알 수 있습니다. 제가 자세히 설명하고 싶지만 실력이 모자란지라....

저는 투명 재생 버튼을 구글 검색에서 play button이라고 찾았습니다. 그러면 많은 버튼을 찾을 수 있을 것입니다. 그리고 버튼은 웬만하면 흰색이면 좋겠습니다. 보통 썸네일이 어둡잖아요. 버튼의 경우는 취향대로 하세요.

<style>

.videos img {

  width:100%;

  height:auto;

}

a.video {

  float: left;

  position: relative;

}

a.video span {

  width: 100%;

  height: 100%;

  position: absolute;

  background: url("https://t1.daumcdn.net/cfile/tistory/272B024E567617E839") no-repeat;

  background-position: 50% 50%;

  background-size: 20%;

}

@media screen and (max-width: 480px) {

  a.video span {

    background-size: 20%;

  }

}

</style>

여기에서 전 약간의 잔머리를 굴려서 마우스 포인터가 썸네일로 가면 재생 버튼이 변하도록 hover를 주었습니다. 재생 버튼이 <span></span>이니 hover는 아래 그림처럼 a video span:hover라고 했습니다. 이런 것은 HTML, CSS, 스크립트 등을 많이 다루니 될 것 같아 해 보았는데 되더라고요. 제가 알아서 한 것이 아닙니다. 배경도 opacity(불투명도)가 되는군요. 이러면서 배우기도 합니다. 

위를 활용한 것은 PC에서 볼 수 있는데 이 블로그 사이드바에 있으며 more 버튼을 눌러야 합니다. 거기에 있는 슬라이드는 carousel이라고 하는데 이것은 부트스트랩에 기본적으로 있는 것을 활용한 것이니 대단한 것이 아닙니다. 활용한 것은 유튜브를 반응형이 되게 한 것밖에 없습니다. 나중에 부트스트랩에 있는 carousel에 대해 간단히 설명하겠습니다.