Hello,
Im having an issue coding a video into my shopify store, it works on desktop but on Mobile the video will pop up full screen taking over the whole screen on the phone. I just want want it to play in the background not taking over the entire screen. Please if you guys find any errors in my code and why its happening only on mobile please let me know.
https://www.chaseabagmerch.com/
Here is the custom liquid:
<div class="video-container">
<div class="video_text">
<p class = "top">
WELCOME TO
</p>
<h1 style = "opacity:0.9; font-family:Lucinda, cursive;"> Chase A Bag Clothing
</h1>
<p>
</p>
<a href="https://www.chaseabagmerch.com/collections/all" class="button" style = "opacity:.85;">SHOP NOW</a>
<br>
</div>
<video loop="loop" muted="" autoplay="autoplay" style="max-width: 100%; height: ; opacity:0.45;">
<source src="https://cdn.shopify.com/videos/c/o/v/7296c45691c84f6997e1021133e1e17f.mov" type="video/mp4" />
Your browser does not support our video.
</video>
</div>
<p style="text-align:center";></p>
</div>
</div>
<style>
.video-container {
position: relative;
}
.video_text {
position: absolute;
z-index: 9999;
bottom:15%;
top:20%;
left: 15%;
right:15%;
padding: 10px;
text-align:center;
}
.video_text h1{
font-size:100px;
}
.video_text p{
font-size:25px;
margin:3% 10%;
}
@media (min-width: 1201px) {
.video_text {
position: absolute;
z-index: 9999;
top:7;
text-align:center;
}
.video_text h1{
font-size:90px;
margin:2% 8%;
color:white;
}
.video_text p{
font-size:20px;
color:white;
margin:8px;
padding:5px;
}
}
@media (max-width: 1201px) {
.video_text {
position: absolute;
z-index: 9999;
top:1;
text-align:center;
}
.video_text h1{
font-size:80px;
margin:1% 10%;
color:white;
}
.video_text p{
font-size:18px;
color:white;
margin:5px;
padding:1px;
}
}
@media (max-width: 1024px) {
.video_text {
position: absolute;
z-index: 9999;
top:10;
font-size: 20px;
text-align:center;
}
.video_text h1{
font-size:65px;
margin-top:1px;
}
.video_text p{
font-size:13px;
color:white;
margin:1px;
padding:10px;
}
.button{
margin:
}
}
@media (max-width: 767px) {
.video_text {
position: absolute;
z-index: 9999;
top:3%;
font-size: 20px;
text-align:center;
}
.video_text h1{
font-size:42px;
}
.video_text p{
font-size:12px;
color:white;
margin:1px;
}
.button{
color:white;
font-size:13px;
padding:px;
margin:1px;
}
.video_text .top {
font-size:12px;
}
}
@media (max-width: 401px) {
.video_text {
position: absolute;
z-index: 9999;
top:1%;
font-size: 20px;
text-align:center;
}
.video_text h1{
font-size:27px;
}
.video_text p{
font-size:0px;
color:white;
}
.button{
color:white;
font-size:13px;
margin-bottom: 10px;
}
.video_text .top {
font-size:8px;
}
}
</style>
