안녕하세요 선생님....
개인 프로젝트 작업 중에 동영상과 css 애니메이션 사파리 호환 문제로 문의드립니다.
우선 html은 아래와 같습니다.
<!----visual start---->
<section class="visual">
<div class="ticket_info">
<h2>GRAND<br>OPENING</h2>
<p><a href="#">BUY TICKETS</a></p>
</div>
<video autoplay="autoplay" muted="muted" loop="loop">
<source src="media/video/visual_main.mp4" type="video/mp4">
<source src="media/video/visual_main.webm" type="video/webm">
<source src="media/video/visual_main.ogv" type="video/ogg">
<object src="media/video/visual_main.swf" type="applicantion/x-shockwave-flash"></object>
" 이 영상을 보기 위해서는 HTML5를 지원하는 브라우저가 필요합니다. "
</video>
</section>
<!----visual end---->
css 코드 입니다.
/*++++section.visual++++*/
section.visual { overflow: hidden; clear: both; position: relative; width: 100%; height: 100vh; }
section.visual video { width: 100%; height: 100vh; object-fit: cover; z-index: 1; }
section.visual div.ticket_info { position: absolute; top: 74vh; left: 6.2500vw; z-index: 10; }
section.visual h2 { font-size: 3.188em; font-family: "Heebo Black"; line-height: 0.9; color: #fff; animation-name: fade_in_up; animation-duration: 2s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
section.visual p { width: 50%; animation-name: fade_in_up; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
section.visual p > a { display: block; padding: 5px; width: 100%; border-radius: 3px; background: #fff; font-family: "Heebo Medium"; font-size: 1em; text-align: center; animation-name: fade_in_up; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
@-webkit-keyframes fade_in_up {
from {
-webkit-transform: translateY(50px); opacity: 0;
}
to {
-webkit-transform: translateY(0px); opacity: 1;
}
}
다른 기기에서는 문제가 없는데, 사파리 (아이폰) 에서는 동영상이 동작하지 않고, css 애니메이션이 작동한 후
<div class="ticket_info">
<h2>GRAND<br>OPENING</h2>
<p><a href="#">BUY TICKETS</a></p>
</div>
위 부분이 몽땅 사라집니다.....(문제는 모바일 실행 시에만 위의 오류가 있고, 안드로이드나 아이패드에서는 또 잘 살아남아있음)
아이폰만 안되는 게 몹시 신경 쓰여서 해보라는 거 다 해봤는데 안돼서 도움을 요청드립니다.ㅠㅠ
이하 질문은 2개입니다.
1. 사파리에서 동영상 정상 실행 방법 (정상 동작하게 하려면 별도의 js 코드를 짜야하는 건지 유무만 알려주셔도 됨)
2. 애니메이션 실행 후 사라져버리는 글자 남아있게하는 방법
두 가지입니다.ㅠㅠ
