Video Background for Different Screen Size

[timothyhouk]

I’m using a video background for a section, but it looks awkward on mobile because the content stretches longer than the video, so there’s a section at the bottom where the “background poster image” shows underneath the video.

I’m wondering if I can use two different videos depending on their screen size. Would the following work? I’d make two nearly identical sections with different video background. Then I’d use the “hide based on screen width” option to hide section 1 (with the full screen video) when people are viewing on small screens and hide section 2 (with the small screen video) when people are viewing on larger screen.

I haven’t used “hide based on screen width” option before and I didn’t want to have my video guy make a second background video if this idea has some fatal flaw for why it wouldn’t work.

[ruenel]

Hello @timothyhouk,

Thanks for writing in! I have checked your Themeco account hoping I can find your site URL and be able to see the actual page with your background video in it. I am not able to find it. To better assist you with the background video issue, please provide us the URL of the page where we can inspect and investigate to provide you a better solution to the issue.

Best Regards.

[timothyhouk]

Here’s the page I’m working on: https://mysummit.church/summit-church-lincoln-ca-draft/

The background video doesn’t play on my iPhone, but I think that’s an iOS issue that automatically disables it. But when tried on an Android phone, the video plays, but it’s the dimensions make it look bad and it looks like the background poster image shows through near the bottom.

[friech]

Hi Tim,

I don’t see the poster image shows near the bottom., but I do see what do you mean video looks bad on mobile. One solution we can do is hide the video on mobile so the poster behind will show up.

You can add this to the Section’s Element CSS area.

/*hide video inside this section on mobile*/
@media (max-width: 480px) {
	$el .x-video-inner {
		display: none;
	}
}

Hope it helps,
Cheers!