
<style>
.my-mp4 { width:100%; display:block; margin:0 auto; }
.my-mp4::-webkit-media-controls-fullscreen-button { display:none; }
.my-mp4::-webkit-media-controls-panel {
position:absolute;
left:50%; top:50%; transform:translate(-50%, -50%);
background-image:none;
width:70%;
}
@media screen and (hover:none) and (pointer:coarse) {
.my-mp4::-webkit-media-controls-panel { position:static; transform:translate(0%, 0%); }
}
</style>
<video class="my-mp4" style="max-width:960px" src="mp4경로" autoplay loop controls controlslist="nodownload"></video>
-----
위의 빨간색 부분 3개의 수치를 퍼센트로 조절합니다.
보라색 960 은 mp4 의 원본 가로 사이즈입니다.
반응형이구요. 모바일의 경우는 이 css 가 무력화되므로 기본 옵션으로 바꿔주는 코드를 얹었습니다.
댓글 8개
게시글 목록
| 번호 | 제목 |
|---|---|
| 16801 | |
| 16798 | |
| 16796 | |
| 16795 | |
| 16791 | |
| 16790 | |
| 16785 | |
| 16777 | |
| 16776 | |
| 16766 | |
| 16760 | |
| 16759 |
JavaScript
전화번호 및 휴대번호 자동하이픈(-)
2
|
| 16740 | |
| 16737 | |
| 16735 | |
| 16728 | |
| 16713 |
PHP
PHP Router
17
|
| 16700 | |
| 16691 | |
| 16669 | |
| 16668 |
MySQL
특정 row의 index 값 구하기
5
|
| 16660 | |
| 16655 | |
| 16654 | |
| 16647 | |
| 16639 | |
| 16637 | |
| 16634 | |
| 16629 | |
| 16620 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기