Different background video for mobile to desktop

Hey!

I have added a background video to homepage of the website

I have a vertical version of the video that I would like as the background video for mobile. 

Can anybody show me how it is possible to add 2 different videos please.

Thanks so much

1. Upload the Videos

• Go to Settings > Files in your Squarespace dashboard and upload both videos:
  • Desktop Video: Wide version
  • Mobile Video: Vertical version
• Copy the URLs for the uploaded videos.

Then, insert a Code Block where you want the videos to

<div class="background-video-container">
    <!-- Desktop Video -->
    <video class="background-video desktop-video" autoplay muted loop playsinline>
        <source src="YOUR_DESKTOP_VIDEO_URL.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <!-- Mobile Video -->
    <video class="background-video mobile-video" autoplay muted loop playsinline>
        <source src="YOUR_MOBILE_VIDEO_URL.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

Add this below code into custom css:

/* Ensure both videos cover their containers */
.background-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Full height */
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide the mobile video by default */
.mobile-video {
    display: none;
}

/* Show desktop video on screens wider than 768px */
@media (min-width: 768px) {
    .desktop-video {
        display: block;
    }

    .mobile-video {
        display: none;
    }
}

/* Show mobile video on screens narrower than 768px */
@media (max-width: 767px) {
    .desktop-video {
        display: none;
    }

    .mobile-video {
        display: block;
    }
}

4 hours ago, Spark-Plugin said:

Hello @visual_ess, You can create a dedicated section with a vertical video background specifically for mobile devices while keeping your current background video section for desktop view. With custom CSS, we’ll ensure the vertical video section appears only on mobile devices, providing a tailored experience for both views. Here’s how you can proceed:

1. Add a New Section:

   • Go to your Squarespace editor.
   • Create a new section just below your desktop background video section.
   • Add your vertical video to this new section.

2. Get the Section ID:

   • In the Squarespace editor, inspect the section using this extension to locate the ID for the vertical video section (e.g., #block-id).

3. Apply Custom CSS:
   Once you have the section ID, use the following CSS:

/* Hide video on desktop screens (768px and wider) */
@media screen and (min-width: 768px) {
  #block-yui_4_12_2_1_2718520257422_12345 {
    display: none; /* Completely hides this video block on desktop and larger screens */
  }
}

/* Hide video on mobile screens (767px and narrower) */
@media screen and (max-width: 767px) {
  #block-yui_1_17_2_1_2717496829514_12345 {
    display: none; /* Completely hides this video block on mobile and smaller screens */
  }
}

Replace #block-id with the ID of the vertical video section and #desktop-video-section-id with the ID of your desktop video section.

 

Let me know if it works:)

Amazing! Worked perfectly and so easy! Thank you so much!!