테스트 사이트 - 개발 중인 베타 버전입니다

mp4 미디어바 중앙정렬

· 2년 전 · 861 · 8

3717943588_1688448459.8998.png

 

<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년 전
@너나잘해 감사합니다

게시글 목록

번호 제목
17819
17818
17817
17816
17814
17811
17810
17809
17808
17803
17799
17798
17797
17795
17794
17793
JavaScript JSON Beautify
17790
17789
17786
17774
17760
17755
17750
17729
17722
17714
17708
17686
17676
17666