본문 바로가기
기타/작업일지

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

by mooyou 2019. 4. 12.
728x90
300x250

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

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

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

 

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

 

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

« Back 19 March 2013 Stack Overflow can be a great place to get the mind going and this evening was no exception. A question was posted asking how to get a HTML5 video’s poster image to fill the element if its aspect ration differs. Firt off, let’s take a

www.iandevlin.com

이 사이트에 나온것 첢

<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;
}
728x90
반응형

'기타 > 작업일지' 카테고리의 다른 글

아이폰 z-index 오류  (0) 2024.02.19
infinityFree 서버 다운 ㅠㅠ  (0) 2019.01.30
infinityfree w3c 유효성검사기 오류  (0) 2018.11.22
w3c 웹표준 검사 알 수 없는 에러  (0) 2018.11.21

댓글