我已经制作了一个落地页,在表单的背景上播放视频。
在桌面上一切正常,但我使用Chrome检查了我的Android设备,背景视频无法播放。
有人能帮我解决这个问题吗?
这是我的链接。
HTML:
在桌面上一切正常,但我使用Chrome检查了我的Android设备,背景视频无法播放。
有人能帮我解决这个问题吗?
这是我的链接。
HTML:
<p>
<video autoplay="" id="video" loop=""><source src="http://www.mygreencity.in/Enquiry.mp4" type="video/webm" /> <source src="Enquiry.mp4" type="video/mp4" /></video>
</p>
<form action="" class="form" method="post">
<p><input name="enq_name" placeholder="Full Name" required="" type="text" autocomplete="off" alt="Full Name" title="Full Name"/></p>
<p><input name="enq_mobile" placeholder="Mobile Number" required="" type="number" autocomplete="off" alt="Number" title="Number"/></p>
<p><input name="enq_email" placeholder="Email" required="" type="email" autocomplete="off" alt="Email ID" title="Email ID"/></p>
<input class="button button-block" name="enq_submit" type="submit" value="Go To Site" alt="Go To Site" title="Go To Site"/></form>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 80px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
p {
margin-bottom: 40px;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: #fff;
background-size: cover;
transition: 1s opacity;
}
div{
margin:20px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}