How to upload video on website banner for mobile and dekstop

[ashhalkb]

I want to ask , the banner of the website ,i put video on banner and it shows on dekstop and on mobile same version , but i want to upload 2 videos 1 for mobile and 1 for dekstop so how can i do that ? do i need to do coding for it ? if yes then what code do i need to write and in which file i have to write ?

[Oneezecomm]

Yes, you can show different videos for desktop and mobile, but it requires a bit of coding. The idea is to upload two separate videos, one for desktop and one for mobile, and then edit your banner section to include both. After that, you use CSS media queries to hide the mobile video on desktop screens and hide the desktop video on mobile screens.

This way, the website will automatically show the right video depending on the user’s device, and you don’t need any extra apps, just a small change in the banner section and the CSS.

[ashhalkb]

There is no option for uploading video for dekstop and mobile . There is only option upload video thats it , there is only options for image banner not for video banner

[PaulNewton]

Hi @ashhalkb That’s an advanced theme customization that varies by theme, it’s beyond the scope of the forums to teach web development.
To DIY you can learn about settings in the theme docs, or research the concepts online or on the forums.
https://shopify.dev/themes/architecture/settings

You can reach out to me for customization services.
CLICK profile-pic on forums for options to connect.
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

[tim_1]

Very popular question and one universal answer:

To have different image/video/other content for mobile and desktop, you create 2 sections – one with desktop content and “Custom CSS” like this:

@media (max-width:749px) {
  { display: none; }
}

Another section will have mobile content and “Custom CSS” like this:

@media (min-width:750px) {
  { display: none; }
}

These CSS codes will only work in “Custom CSS” of a section

Using these codes will show either one section or another, depending on screen width.

Why I recommend 2 sections approach instead of adding extra setting for mobile via code edit?

• It does not require code edits.
• It is more universal – you can apply this approach to any type of section, just by pasting same CSS rules into “Custom CSS” vs.
  to add additional mobile setting for 5 types of sections you’d need to modify 5 different files in theme code…
• Then you can fine tune mobile section to look good on mobile and desktop section to look good on desktop… Having both mobile and desktop on the same section will require extra settings, like “Mobile height” in addition to “Desktop height”…

Some drawbacks are possible, but can be fixed with minor CSS tweak.

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[suyash1]

@ashhalkb create 2 sections, in one section upload video for desktop and in other upload mobile video. SO now you have 2 videos on your page and then using media query css you can set them to be visible as per the screen size.

[oscprofessional]

@ashhalkb

I want to ask , the banner of the website ,i put video on banner and it shows on dekstop and on mobile same version , but i want to upload 2 videos 1 for mobile and 1 for dekstop so how can i do that ? do i need to do coding for it ? if yes then what code do i need to write and in which file i have to write ?

Hi @ashhalkb ,
Yes, you can use separate banner videos for desktop and mobile, but most Shopify themes don’t offer this option by default. To achieve it, you’ll need a small custom code change inside your theme section (usually the “slideshow” or “video banner” section).
Go to:
Online Store → Themes → Edit Code → Sections
Look for a file like:

• slideshow.liquid
• video-banner.liquid
• banner-video.liquid
  (or whatever your theme uses for the homepage banner)

Inside that file, you will add both videos and hide them using CSS.
Add this inside your banner section’s markup where the video normally appears:

<div class="banner-video-wrapper">
  
  <!-- Desktop Video -->
  <video class="video-desktop" autoplay muted loop playsinline>
    <source src="{{ section.settings.desktop_video | file_url }}" type="video/mp4">
  </video>

  <!-- Mobile Video -->
  <video class="video-mobile" autoplay muted loop playsinline>
    <source src="{{ section.settings.mobile_video | file_url }}" type="video/mp4">
  </video>

</div>

Then add CSS (usually in base.css or theme.css):

.video-desktop {
  display: block;
}
.video-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .video-desktop {
    display: none;
  }
  .video-mobile {
    display: block;
  }
}

Add settings so you can upload videos from the Theme Editor

At the bottom of the same section file, inside the {% schema %} tag, add:

{
  "type": "file",
  "id": "desktop_video",
  "label": "Desktop video"
},
{
  "type": "file",
  "id": "mobile_video",
  "label": "Mobile video"
}