mp4 미디어바 중앙정렬

<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개
2년 전
오랜만에 팁을 올려주셨네요!!
비타주리님 팁과 스킨을 보고 많이 배웠는데 그간 뜸하셔서 무슨일이 있으신가하고 궁금했습니다.
올려주신 팁 유용하게 사용하겠습니다.
감사합니다^^
비타주리님 팁과 스킨을 보고 많이 배웠는데 그간 뜸하셔서 무슨일이 있으신가하고 궁금했습니다.
올려주신 팁 유용하게 사용하겠습니다.
감사합니다^^
2년 전
@김철용
말하자면 길고 개발이 메인직업이 아니다 보니 그냥 굴곡을 탑니다.
며칠 전에 호텔천사님하고 잠시 카톡 주고 받은 후 여길 와보니 레벨이 곧 단단위로 떨어질 것 같은 위기의식 때문에 그냥 아메바같은 원생동물에나 어울리는 팁이나 올려서 난관을 극복하려 하고 있어요.ㅋ
말하자면 길고 개발이 메인직업이 아니다 보니 그냥 굴곡을 탑니다.
며칠 전에 호텔천사님하고 잠시 카톡 주고 받은 후 여길 와보니 레벨이 곧 단단위로 떨어질 것 같은 위기의식 때문에 그냥 아메바같은 원생동물에나 어울리는 팁이나 올려서 난관을 극복하려 하고 있어요.ㅋ
브러운아이
2년 전
좋은팁 감사합니다.
2년 전
@브러운아이 감사합니다
2년 전
오랜만입니다. 좋은 팁 감사 합니다.
2년 전
@들레아빠 감사합니다
2년 전
감사합니다
2년 전
@너나잘해 감사합니다
게시글 목록
| 번호 | 제목 |
|---|---|
| 18200 | |
| 18195 | |
| 18193 | |
| 18181 | |
| 18179 | |
| 18173 | |
| 18170 | |
| 18164 | |
| 18158 | |
| 18155 | |
| 18152 |
JavaScript
한글과컴퓨터 키워드추출스크립트.
2
|
| 18151 | |
| 18150 |
JavaScript
위에서 아래로 내려오는 효과 6가지
|
| 18140 | |
| 18139 | |
| 18138 |
JavaScript
마우스로 td 간격 조정하기.
1
|
| 18131 | |
| 18130 |
JavaScript
엘레먼트에 다이렉트로 변수,배열,객체 심기
|
| 18120 | |
| 18119 | |
| 18118 |
jQuery
0원팁- 숫자형 아이디에 접근하기
1
|
| 18117 |
jQuery
유용하게 써먹는 반응형 grid
1
|
| 18116 | |
| 18111 |
MySQL
db에서 트리거 만들기
|
| 18110 | |
| 18108 |
JavaScript
디바운스 debounce의 개념
1
|
| 18107 |
JavaScript
jquery 타이머 만들기
2
|
| 18106 | |
| 18100 | |
| 18090 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기