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

mp4 미디어바 중앙정렬

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

게시글 목록

번호 제목
17591
17590
17589
17588
17587
17584
17583
17582
17581
17579
17577
17575
17574
17573
17572
17569
17564
17560
17559
17555
17554
17553
17552
17549
17548
17547
17542
17533
17531
17524