Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Can I play a different background video for mobile?


DrMSacks
Go to solution Solved by rwp,

Question

  • Answers 25
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@media screen and (max-width:1024px) { [data-section-id="5f5beacf1cb1680c6b76bcb1"] { display: none !important; } } @media screen and (min-width:1025px) { [data-section-id="5f7104719344cd07

I fell for my own trick........ It doesn't work because the other section is visible on mobile, for the video background. This will work. Replace this line: #block-yui_3_17_2_1_1600516236805_

25 answers to this question

Recommended Posts

  • 0
@media screen and (max-width:1024px) {
  [data-section-id="5f5beacf1cb1680c6b76bcb1"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="5f7104719344cd07a2ef3145"] {
    display: none !important;
  }
}

 

Link to post
  • 0

Thanks rwp!!

That's awesome!!!

On a related note, on that same page, the mobile font isn't exactly how I want it to be.

I have this code below in my Custom CSS that does a nice job of reducing the title font for mobile, but it doesn't appear to affect the top 2 words of the title ('South Florida'). Also, that text is within a markdown box, which is perhaps a part of my issue?

 

@media screen and (max-width:640px) {
h3 span {font-size: 36px !important;}
}

Link to post
  • 0

Thanks rwp!!

That's awesome!!!

Also, how do I do this on more than one page?

And on a related note, on that same page, the mobile font isn't exactly how I want it to be.

I have this code below in my Custom CSS that does a nice job of reducing the title font for mobile, but it doesn't appear to affect the top 2 words of the title ('South Florida'). Also, that text is within a markdown box, which is perhaps a part of my issue?

 

@media screen and (max-width:640px) {
h3 span {font-size: 36px !important;}
}

Link to post
  • 0

The South Florida part of the text is not in the span, which is what you targeted with the css.

You would need to do:

@media screen and (max-width:640px) {
	h3,
	h3 span {
		font-size: 36px !important;
	}
} 

 

Link to post
  • 0

Sure. The #block will only change Florida, the rest is what you had before.

@media screen and (max-width:640px) {
	#block-yui_3_17_2_1_1600516236805_10107 h3 {
		font-size: 56px !important;
	}

	h3 span {
		font-size: 36px !important;
	}
} 

 

Link to post
  • 0

That doesn't seem to be working for me.

This is my whole Custom CSS right now:

 

@media screen and (max-width:640px) {
    #block-yui_3_17_2_1_1600516236805_10107 h3 {
        font-size: 56px !important;
    }

    h3 span {
        font-size: 36px !important;
    }
}  

@media screen and (max-width:1024px) {
  [data-section-id="5f5beacf1cb1680c6b76bcb1"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="5f7104719344cd07a2ef3145"] {
    display: none !important;
  }
}

Link to post
  • 0

I fell for my own trick........ It doesn't work because the other section is visible on mobile, for the video background.

This will work. Replace this line:

#block-yui_3_17_2_1_1600516236805_10107 h3 {

With this:

#block-a89aabdb6864ee5ef820 h3 {

 

Link to post
  • 0

And to tempt fate...

How could I do the hidden video trick for 2 more pages?

Now I have dual video sections on the 'Services' and the 'About' pages. Hoping to make the lower video sections only for mobile.

Your code is great, but a bit obtuse for my brain to reverse engineer.

Help please thank you!

Edited by DrMSacks
grammar
Link to post
  • 0

Hi I am a complete newbie with no code experience and am having the same issue.  I have tried to follow the instructions above but it doesn't seem to be working for me.  Can anyone help me please?

 

Link to post
  • 0

Hello, I'm also trying to do the 2 videos on my homepage and only show 1 for mobile / 1 for desktop. I have those videos ready on the page and just need the custom code -- how do I share a private link for someone to help here?

Link to post
  • 0

@rba

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

@creedon @rwp @tuanphan

Trying to do the same thing here, one background video that loads for desktop (this is already on my site) and a different compressed version that loads for mobile. 

Site is : roosbrothers.com

What code is necessary to do so and where should I host the mobile background video?

Thanks!

Edited by joshroos
Link to post
  • 0
22 hours ago, joshroos said:

@creedon @rwp @tuanphan

Trying to do the same thing here, one background video that loads for desktop (this is already on my site) and a different compressed version that loads for mobile. 

Site is : roosbrothers.com

What code is necessary to do so and where should I host the mobile background video?

Thanks!

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

Or if 2 videos make page slowly loading, we can use code to redirect to new page on mobile only?

Link to post
  • 0
On 4/15/2021 at 7:41 AM, tuanphan said:

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

Or if 2 videos make page slowly loading, we can use code to redirect to new page on mobile only?

@tuanphan Where should I host the 2nd video? It's on Vimeo, does it need to be embedded into my site?

What I am trying to achieve is to have one video (full-res) play on desktop, and the same video (but compressed) so it loads quicker and easier on mobile. 

 

 

Edited by joshroos
Link to post
  • 0
On 4/15/2021 at 9:39 AM, joshroos said:

@tuanphan Where should I host the 2nd video? It's on Vimeo, does it need to be embedded into my site?

What I am trying to achieve is to have one video (full-res) play on desktop, and the same video (but compressed) so it loads quicker and easier on mobile. 

 

 

@tuanphanany update on how to make this work and where I should host the 2nd video?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...