썸네일과 동영상 비율이 안맞을때

동영상 클릭했을때 빈 공간이 생기는 문제 썸네일과 동영상 비율이 달라서

동영상 에 맞춰서 비율을 설정할 경우 썸네일에 공간이 생길수 밖에 없다 반대로 썸네일에 맞추면 동영상에 공간이 생김

이걸 해결하려고 검색하다가 찾은 해결법

 

http://www.iandevlin.com/blog/2013/03/html5/html5-video-and-background-images/

HTML5 Video and Background Images - Ian Devlin :: Web Developer

이 사이트에 나온것 첢

<video controls poster="parrots.jpg">
   <source src="parrots.mp4" type="video/mp4">
   <source src="parrots.webm" type="video/webm">
</video>

poster 이미지가 영상이랑 맞지 않는 경우

 

2X2의 투명이미지를 만들어서 poster자리에 대신 넣어주고

넣으려는 이미지는 bg로 깔아준다

 

<video controls poster="transparent.png">
   <source src="parrots.mp4" type="video/mp4">
   <source src="parrots.webm" type="video/webm">
</video>

video {
   width:305px;
   height:160px; 
   background:transparent url('parrots.jpg') no-repeat 0 0;
   -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover;
}