mainVideo 모바일 시에는 영상 안나오고 이미지로 가고 싶어요.
본문
<div class="li">
<section class="mainVideo">
<div class="bg-fixed"></div>
<video src="<?=G5_THEME_URL?>/img/영상.mp4" class="mainFullVideo" muted="" loop autoplay playsinline="" style="width: 100%; height: 1440px; left: 0px; top: -210px; background-color:#000; position:relative">
<source src="" type="video/mp4">
</video>
pc는 메인에 영상 돌아가서 좋은데 모바일은 영상이 안나오고 이미지로 설정된 <div class="li img01">로 넘어가게끔하고 싶습니다.
그렇게하려면 미티어쿼리에
@media screen and (max-width: 640px) {
.mainVideo { position: absolute; top: 0; left: 0; width: auto; height: auto; }
현재 설정된 값.
.mainVideo { 여기에 영상나오지 않고 <div class="li img01"> 로 넘어가게끔 }
어떻게 해야할까요?
고수님들 쉽게 설명부탁드려요.
답변 2
@media screen and (max-width: 640px) {
.mainVideo { display:none; }
.img01 { display:block; }
}
@media screen and (max-width: 640px) {
.mainVideo { display:none; }
.img01 { display:block; }
}
이렇게 넣어봤는데 영상은 안나오고 하얀 화면만 나오네요.
모바일에서는 두번째 롤링으로 나오는 <div class="li img01">로 첫화면으로 나오게는 안될까요? ;;
<div class="li img01">
<img src="이미지경로">
</div>
이 소스도 추가하신거죠??
