Hy,
I have a question regarding a background video played in the website, website that needs help
Sorry if it is not the right place, just want to be sure if I am not doing something wrong in code/other settings.
In the settings of wordpress/ elementor, the videos are set to play in all responsive modes,but if I disable for mobile, it dont play in tabs also unless set to horizontal position, but working fine if I see in available modes while testing in elementor (currently enabled on mobile so could see on tablet device also)
Below is the code used, also start time is set to 0, but takes almost 5-10 secs to play the video.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-weight: normal;
font-family:;
color: #cccccc;
font-size:28px;
text-decoration: none;
//display: grid;
place-content:center;
//justify-content:center;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right:470px;
padding-left: 20px;
}
.shop{
padding-top: 500px;
padding-left: 40px;
}
.services{
padding-top: 500px;
padding-right:500px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
//cursor: pointer;
display: inline-block;
}
}
@media only screen and (max-width:2400px) and (min-width:1199px) {
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-weight: normal;
font-family:;
color: #cccccc;
font-size:28px;
text-decoration: none;
//display: grid;
place-content:center;
//justify-content:center;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right:420px;
padding-left: 20px;
}
.shop{
min-width:10px;
padding-top: 500px;
padding-left: 50px;
}
.services{
padding-top: 500px;
padding-right:450px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
//cursor: pointer;
display: inline-block;
}
}
@media only screen and (max-width:1366px) and (min-width:1170px) {
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-weight: normal;
font-family:;
color: #cccc;
font-size:28px;
text-decoration: none;
//display: grid;
place-content:center;
//justify-content:center;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right:410px;
padding-left: 65px;
}
.shop{
padding-top: 500px;
padding-right:65px;
}
.services{
padding-top: 500px;
padding-right:400px;
padding-left: 0px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
//cursor: pointer;
display: inline-block;
}
}
@media only screen and (max-width:1200px) and (min-width:1000px) {
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-weight: normal;
font-family:;
color: #cccc;
font-size:28px;
text-decoration: none;
//display: grid;
place-content:center;
//justify-content:center;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right: 350px;
padding-left: 160px;
}
.shop{
padding-top: 500px;
padding-left: 35px;
}
.services{
padding-top: 500px;
padding-right:220px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
//cursor: pointer;
display: inline-block;
}
}
@media only screen and (max-width:1024px) and (min-width:768px) {
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-weight: normal;
font-family:;
color: #cccccc;
font-size:28px;
text-decoration: none;
//display: grid;
place-content:center;
//justify-content:center;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right:260px;
padding-left: 105px;
}
.shop{
padding-top: 500px;
padding-left: 40px;
padding-right:130px;
}
.services{
padding-top: 500px;
padding-right:200px;
padding-left: 62px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
//cursor: pointer;
display: inline-block;
}
}
@media only screen and (max-width:767px) {
.image{
height: 800px;
width: 100%;
display:flex;
justify-content: space-evenly;
align-items: center;
font-weight: normal;
font-family:;
color: #cccccc;
font-size:25px;
text-decoration: none;
//display: grid;
place-content:center;
//justify-content:center;
background-size: cover;
background-position: center;
}
.training{
padding-top: 500px;
padding-right:120px;
padding-left: 0px;
}
.shop{
padding-top: 500px;
padding-left: 20px;
padding-right:05px;
}
.services{
padding-top: 500px;
padding-right:130px;
padding-left:0px;
margin: 0px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 100;
//cursor: pointer;
display: inline-block;
}
}
</style>
</head>
<body>
<div class="image">
<div class="services">
<span onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="training">
<span onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
</body>
</html>Appreciate the advice/help. Thanks