728x90
300x250
동영상 클릭했을때 빈 공간이 생기는 문제 썸네일과 동영상 비율이 달라서
동영상 에 맞춰서 비율을 설정할 경우 썸네일에 공간이 생길수 밖에 없다 반대로 썸네일에 맞추면 동영상에 공간이 생김
이걸 해결하려고 검색하다가 찾은 해결법
http://www.iandevlin.com/blog/2013/03/html5/html5-video-and-background-images/
이 사이트에 나온것 첢
<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 |
댓글