Background Video too Stretched out

Support
#1

Hi I’m trying to replicate background video feature on this website > http://mspinkherself.com/

but I’m struggling to do that … see here to understand what I mean > http://wordpress-121435-418545.cloudwaysapps.com/index.php/home/

It’s showing too stretched out to the left …

Please help thank you

#2

Hi There,

Thanks for writing in!

I can see the video background is coming fine in both the pages.

I am not sure exactly what you wants to achieve here, can you please help us to understand the issue properly.
Please send us a screenshot that you want to achieve here.

Thanks

#3

Please see quick explanation video here - this will make more sense > http://youtu.be/153H_7sDUus?hd=1

The website you have screenshot is the one that is going to be discontinued and I’m trying to rebuild the same one but on X …

Problem I’m having is with getting the background video to be shown (centered) the same way. Right now it’s very stretched out (see the video)

In addition I’m trying to set it up as a Paralax also.

Please advise… thank you guys

Any help is much appreciated .

#4

Hey @VITFIT,

After much tinkering, I have replicated the setup of your sample site. Here is the setup.

  1. The z-index of the section containing your background video must be set to 0
  2. The background parallax must not be used. I believe this is causing the zoomed in effect because by default the size is set to 150%.

The background parallax is close to the true parallax effect though so it has its advantage when you’re using an image.

  1. Assign a class to your section (containing the bg video) like fixed-bg
  2. Add this CSS to your page.
.fixed-bg .x-bg {
  position: fixed;
}
  1. In mobile view, you must hide the section using Hide During Breakpoints feature under the Customize tab in the element’s inspector. Then, design your section differently in mobile because the video won’t look good because there is important details in it which is the person in the video.

Please watch this screencast to see the actual setup.

Hope that helps.

1 Like
#5

You are amazing!!! Thank you Christian!!!

#6

Glad to hear we managed to help!

#7

Might need some more help please

It now appears the fixed-bg is pushing the footer out (footer is now invisible…)

http://wordpress-121435-418545.cloudwaysapps.com/index.php/home/

#8

Hi there,

Please add this code in the custom CSS:

.x-colophon.bottom {
    z-index: 999;
}

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.