Hello - I am seeking some help where I have a custom liquid code right now to auto play (and loop, without audio) a video on my homepage. For mobile I want to pull in a different video. Can you please help me adjust the code to enable this?
The current code that works great with the same video on both desktop and mobile is below:
video { display: block; margin: 0 auto; width: 100%; height: 50%; opacity: 100%; position: relative; } .video-container { position: relative; width: 100%; height: 50%; } .shop-now-button { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.5); /* Black background with 50% opacity */ color: white; padding: 8px 25px; font-size: 15px; border: none; cursor: pointer; text-decoration: none; border-radius: 25px; z-index: 1; } .shop-now-button:hover { background-color: rgba(100, 93, 80, 1); /* Adjust hover color */ }This is the code I have been trying to use for a different video in mobile but it’s not working. The new video is not coming up on mobile. I see the button but no video.
video { display: block; margin: 0 auto; width: 100%; height: auto; opacity: 100%; position: relative; } .video-container { position: relative; width: 100%; height: auto; } .shop-now-button { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.5); /* Black background with 50% opacity */ color: white; padding: 8px 25px; font-size: 15px; border: none; cursor: pointer; text-decoration: none; border-radius: 25px; z-index: 1; } .shop-now-button:hover { background-color: rgba(100, 93, 80, 1); /* Adjust hover color */ } /* Media Query for Mobile Devices */ @media only screen and (max-width: 768px) { .desktop-video { display: none; } .mobile-video { display: block; } } /* Hide the mobile video on larger screens */ .mobile-video { display: none; }any idea or help would be much appreciated! thank you!