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개
비타주리님 팁과 스킨을 보고 많이 배웠는데 그간 뜸하셔서 무슨일이 있으신가하고 궁금했습니다.
올려주신 팁 유용하게 사용하겠습니다.
감사합니다^^
말하자면 길고 개발이 메인직업이 아니다 보니 그냥 굴곡을 탑니다.
며칠 전에 호텔천사님하고 잠시 카톡 주고 받은 후 여길 와보니 레벨이 곧 단단위로 떨어질 것 같은 위기의식 때문에 그냥 아메바같은 원생동물에나 어울리는 팁이나 올려서 난관을 극복하려 하고 있어요.ㅋ