我正在用全寬度背景視頻構建頁面。爲了達到這個目的,我把視頻放在絕對位置,拉伸它,給它一個負Z指數。作爲頁面內容,我添加了一個表單。無法通過HTML5上的HTML5視頻元素訪問文本字段
<style type="text/css"></style>
#video-background{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
</style>
<video id="video-background" preload="auto" autoplay="true" muted="muted" volume="0">
<source src="../../css/video/globe.mp4" type="video/mp4">
</video>
<form action="#">
<input type="email" name="email" value="Enter your email address">
<input type="submit" name="submit" value="Submit Email">
</form>
當我在iPhone(Safari)上訪問此頁面並嘗試點擊文本框時,我無法集中注意到該元素。就好像有東西阻塞元素或阻止觸摸事件。放置在這裏的文字也不可選。
相對定位形式並賦予它更高的z-索引似乎沒有任何影響。
form{
position: relative;
z-index: 1000;
}
我測試了iPhone 4和iPhone 5上運行iOS 7.0.4的這個頁面。
任何建議將不勝感激。
你使用的相對位置的父(容器)視頻元素在哪裏? – mcmac
嗨,不,因爲視頻是整個頁面的背景。 – Sceletia
好的我知道你想要做什麼。嘗試爲父視頻示例創建相對位置創建div並添加類容器,將寬度和高度設置爲100%和相對位置。移動此div內的視頻元素。我可以幫助你,但我需要看到更多的代碼 - 你的網站,因爲現在我不知道你做了什麼。 – mcmac