Video Parallax Size Issues

[tsimarketing]

I am trying to put a video in a parallax and I already have the file set to the dimensions I want it to be. Which is 1170×300. But when I put this video into the parallax it isn’t taking up the whole parallax, it is off center and looks like there is padding of some sort below and above it. I do have a custom css code that is for this parallax box but I made the padding in the code 0. I don’t have the WebM or OGG file in it yet, so you will have to look at this in safari.

[tsimarketing]

Now I have the WebM and OGG files added, and I can see the video on firefox but it is super big. We exported the file in the dimensions we wanted, 1170×300, but it seems to be blowing the video up. How would I make the video fit the size of the parallax container?

[Rui Guerreiro – SUPPORT]

Hi,

Can you make an experiment an export the video with a higher resolution than the dimensions of the container. Maybe 1920×1080 as an experiment.

-Rui

[tsimarketing]

Okay, so that worked for making the video fill up the parallax container. But the video itself is still blown up a little. The close up shots should not be cutting off so much of their face. I know making the dimensions larger would probably do this, but it looked blown up even when the dimensions were the size we wanted (1170×300). Is there something I should be setting it to in the parallax adjustments or is there a custom css code to help with this. Because the video looks blown up across all internet browsers. I have attached a screenshot of what we want the video to look like, its a screenshot of the girl in the video. You can see the difference, and that the one on our site is blown up.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

I guess you need to increase the height of the video container

Instead of your 300px in the example below is with 430px
https://www.dropbox.com/s/1jif3hpqwdk7zos/parallax_video.png?dl=0

-Rui

[tsimarketing]

I am having two issues with the parallax on one of my pages.
http://tsihealthcare.com/maintesting/our-approach/

1. I am still having problems with this video in a parallax. I have finally got it to look how I want it to look on Firefox, but of course the video is getting cut off on google chrome, internet explorer, and safari. It just looks like the video is getting pushed up on these three browsers, like there is some mysterious padding on the bottom of the parallax. But I have mb0 & pb0 set in the extra class on the parallax. I have attached screenshots of what google chrome and safari look like. In internet explorer there is a gray bar like these two, but it is a lot smaller. I have also attached a screenshot of how it looks on Firefox (which is how I want it to look). I don’t understand why it looks different on all 4 browsers.

When I go look at your Dante website, your parallax of the welder looks good on all browsers, how come mine doesn’t? This is really important that I get this issue fixed so if several of you have suggestions that would be great.

I have also attached the settings of the parallax so you can see what I have it set to. I do have two different css codes that deal with the height of the container and the height of the video. Let me know if you need to know those to help me.

2. In the screenshots you can see that there is some text that is not centered in the parallax. I have put an image of text in the parallax but on the frontend that image of the text is not centered vertically. It’s getting pushed down for some reason. The reason why I am not just typing out the text is because I have used the same text image on the headers on the other pages and I want them all to match. Is there a way to get this image of text to be vertically centered.

If someone can please help me with this I would greatly appreciate it!

Attachments:

You must be logged in to view attached files.

[tsimarketing]

We have a meeting today to show off some pages of our website and this page is one of them. So I am going to take down the parallax for now since it is not working right and just put the video in a row. So if you guys look at this page after I send this message the parallax will not be on there. But I did send you screenshots yesterday so hopefully you can go off that. I will put the parallax back up there once our meeting is done so you guys can assess it.

[Rui Guerreiro – SUPPORT]

Hi,

Will have to forward the topic to the development team.

-Rui

[Swift Ideas – Ed]

Hi there,

Add this custom css –

.spb_parallax_asset {
padding-left: 0;
padding-right: 0;
}
.sf-parallax-video video {
top: 0!important;
}

That should sort it.

Let us know.

– Ed

[tsimarketing]

Ok so that worked for getting the video to stick to all sides of the parallax on all browsers. But when you expand the browser the video gets bigger but the container area stays the same size, which means part of the video gets cut off depending on how big the browser is. And I noticed on the Dante theme site, the parallax video with the welder does not get bigger when the browser is expanded. Is there a way to make this parallax not responsive when you make the browser smaller or bigger? I have the parallax set to Video Height right now, should it be Content Height instead or does that setting not really matter?

Also, the text image I have over the parallax is still not centered. When I have the setting to “Video Height” the text image is positioned at the bottom like it is right now. When I have the setting to “Content Height” the text image is positioned at the top. How can I get it to be centered?

I have the parallax up right now:
http://tsihealthcare.com/maintesting/our-approach/

[Swift Ideas – Ed]

The video on the demo definitely gets expanded as the browser is extended.

Try content height – it may work better for you, that is what the demo example is set to.

– Ed

[tsimarketing]

It may expand a little but not as drastically as our parallax video. I’ve attached two screenshots showing how much our video expands and how much the video gets cut off. The first screenshot the browser is smaller and you can see more of the video and in the second screenshot the browser takes up the whole screen and some of his face gets cut off. When I expand the browser on the dante site, not very much of the video gets cut off. You can still see everything.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi @tsimarketing

That is just because the focus of the video on the dante site is at the top. The video has to scale to fit the width of the asset, and thus the height increases too.

We could implement a solution to vertically center the video within the asset, but then you’d likely lose the top section of the video.

– Ed

[tsimarketing]

Okay, so it sounds like there is nothing that I can do to get the video to look right no matter what the browser size is. Would changing the actual video file size possibly help?

Also no one has helped with getting the text image centered over the parallax yet. Is there a code that can do that?

[Swift Ideas – Ed]

The only thing I can recommend would be to increase the height of the asset – adding returns, but with full width assets you can’t realistically have a background video that ensures full visibility unfortunately.

The easiest way to center the image would be to add line returns above the image, or making the image the same height as the parallax asset (whitespace above and below to pad it).

– Ed