Jump to content

Can I play a different background video for mobile?

Go to solution Solved by rwp,

Recommended Posts

  • 2 months later...
12 hours ago, DiceDigital said:

I'm having the same issue. www.DiceDigitalStudios.com
The background video doesnt look great on mobile version, but I have another version that better formatted for mobile dimensions. How can I use the mobile video for mobile view only?

You can add 2 sections, then we will give the code to show 1 on desktop, show another on mobile

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
16 hours ago, IwanJ said:

Hi @rwp or @creedon, hope you're well?

Any ideas what's the best for me to do to make my mobile view look good re the homepage top section video background and text??

I've tried a bunch of codes for mobile, but the section looks overloaded with the video and the heading...

https://deep-learning-cafe.squarespace.com/

password: password123

Any ideas will be so welcome! I just want mobile to look great!

Did you solve? It looks fine to me

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Hey y'all. Used all of this to get my site working with different videos for desktop/mobile, thank you! I am noticing now that there's a slight lag to the loading of the page on both followed by a quick reset of the correct video. Is this normal? Not the end of the world but obviously if there's a way to fix it that would be ideal. 

Website is Jusinfocus.com

Edited by Jusinfocus
Link to comment
4 hours ago, Jusinfocus said:

I am noticing now that there's a slight lag to the loading of the page on both followed by a quick reset of the correct video. Is this normal?

I don't have a fix but I can comment on the technique in general. When you have two different videos, one for desktop and one for mobile, they are both going to be loaded, even though only one will be used. That can't be helped.

I didn't notice any visual oddities when I loaded your page. It could be on lower speed connections or slower computers you might see some browser reflow issues.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

Hey guys, could I get a link to the code that allows for separate videos i.e. one on mobile and anther on desktop?

I'm uploading video directly as a landing page by the way and need to upload a better resolution for mobile. Thanks in advance!

J.

Link to comment
On 5/1/2022 at 10:15 AM, tuanphan said:

You can add 2 sections, then we will give the code to show 1 on desktop, show another on mobile

Hey, do you have this code available and could you let me know where I'd place it?

Link to comment
19 hours ago, JRXN said:

Hey, do you have this code available and could you let me know where I'd place it?

Hi.

You need to add 2 videos first.

If your site is live, you can create a test page, add videos, then share its url, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I thought I was a smarty pants but I can't get this right 🤦🏻‍♂️

https://www.castandstream.com

Here is the code I tried..

/* Mobile video */
@media screen and (max-width:767px) {
[data-section-id="62e010c623245f745f644d96"] iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

[data-section-id="62e010c623245f745f644d96"] {
    min-height: unset !important;
}
}

Any help would be greatly appreciated.

Edited by Phil1570047712
Link to comment
  • 5 weeks later...
On 8/26/2022 at 4:42 PM, _DavidFallon said:

Hi, I'm very new to Squarespace and have just made my website. I similarly would like a different video to play on my homepage when viewing on mobile than on desktop. I'm not using YouTube, I'm uploading the video. Would anyone be able to help me in getting the two different videos?

2 options to do this

O1. You add 2 videos, then we will give code to show 1 on desktop, show another on mobile

O2. We will give the code to redirects users on mobile to new page. Then you can add video on that page

What do you think?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/28/2022 at 10:01 AM, tuanphan said:

2 options to do this

O1. You add 2 videos, then we will give code to show 1 on desktop, show another on mobile

O2. We will give the code to redirects users on mobile to new page. Then you can add video on that page

What do you think?

I think I'd like to do option 1! I have both videos ready to go.

Link to comment
On 8/31/2022 at 5:53 PM, _DavidFallon said:

No problem: https://hawk-tuba-p9y3.squarespace.com/config/

The first video at the top of the page with the text and buttons is the one I'd like on the desktop homepage. The second one as you scroll down with nothing over it is what I'd like for the mobile one.

Your site is private. Can you setup an access password & share url again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
13 hours ago, NIMC said:

Hi! I'm having the same issue with my site - needing a different video to load on mobile.  I have two background video sections on my site: the first for desktop, the second for mobile.  How do you hide one vs. the other depending on desktop vs. mobile?  https://www.nikkimcmorrow.com

Hi,

Hide bottom on desktop

Hide top on mobile

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 10/8/2022 at 12:59 AM, plantchildren said:

Would you be able to possibly send me the code too, to have a different background video on mobile than web? I'm totally new to this !

If you share like to your site, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.