Hi there! Hope you are well.
Ian here from Fast Bundle.
The general code is here but you must customize it based on your theme and it's elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Landing Page</title>
<style>
/* Full screen layout */
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000; /* optional background */
}
/* Landscape box */
.video-container {
width: 80vw; /* 80% of viewport width */
aspect-ratio: 16 / 9; /* landscape aspect ratio */
overflow: hidden;
position: relative;
border-radius: 10px; /* optional rounded corners */
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* makes sure video fills container while keeping aspect */
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay loop muted playsinline>
<source src="your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
Please let me know if it works by a Like or marking it as a solution!
Best Regards | Ian
Fast Bundle - Seamless Bundle Builder for Shopify Merchants.
