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

mp4 미디어바 중앙정렬

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

게시글 목록

번호 제목
16801
16798
16796
16795
16791
16790
16785
16777
16776
16766
16760
16759
16740
16737
16735
16728
16713
16700
16691
16669
16668
16660
16655
16654
16647
16639
16637
16634
16629
16620