Jump to content

Video for mobile vs Desktop

Go to solution Solved by Ziggy,

Recommended Posts

Hi all

Stuck on what I thought would be something simple to implement... Any help would be greatly appreciated.

I want to include a showreel video on my site.
This needs to exist in two formats, so it looks good for both Desktop and Mobile views.

I've created two separate video files:
— 16x9 For Deskstop
— 4x5 Mobile

How can I code via CSS to switch the assets for corresponding device?

website: www.studioyoung.co.uk

video block in question
#block-yui_3_17_2_1_1714860073696_44912

image reference attached.

Many thanks for help in advance as this is driving me insane!

 

 

 

Screenshot 2024-05-10 at 11.41.55.png

Link to comment
  • Replies 6
  • Views 169
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Try this CSS:

@media only screen and (max-width:767px) {
  section[data-section-id="66340409d7dea276bd80b731"] {
    .video-block { 
      .video-player {
        padding-bottom: 125% !important;
      }
    }
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hey Ziggy

How can I get it to link to a different asset though. I have 1 videos created in 2 different formats. So with that code at present, it just calls up the video asset I created for Desktop.

Does that make sense?

 

Link to comment
Just now, Inkdave said:

How can I get it to link to a different asset though. I have 1 videos created in 2 different formats. So with that code at present, it just calls up the video asset I created for Desktop.

You need to add the videos to 2 video blocks and then we can use CSS to show/hide each video block on desktop/mobile.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
Posted (edited)

Use this and add your two video block IDs:

//desktop - hide mobile video
@media only screen and (min-width:768px) {
  #block-id {
    display:none;
  }
}  
  
//mobile - hide desktop video
@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1714860073696_44912 {
    display:none;
  }
}

Then adjust the mobile/desktop layout to look good.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ziggy that works with a little tweaking. Thank you so much.

As a sub question to this:
Can I get my video content now to fill its player container in mobile view?

thanks again 

Link to comment

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.