Replacing Home page banner video.

[SBegum]

Hi,

Our main page is www.frommpackaging.ca   . we have a video header which needs to be replaced. The is a home page banner module below.

i created a demo page to see if the replacing the video works. it worked, But the video is getting chopped off from the bottom. Would be grateful if some one can help to make the video in full size.

https://www.frommpackaging.ca/demo

Thanks & regards, sajitha

[ACoasta]

Assuming you have the CMS, which is required to publish net content material to the www subdomain, you need to edit the settings of your property web page and cast off the content slug (which have to presently contain home or /home) so that just the root subdomain is proven. 

[jonchim]

Hey @SBegum,

You're welcome! glad I can help out! 
so regarding the video URL, if that's a video field in the module you may need to turn on the vidyard features and re-upload the video.

If you uploaded to the file manager you can add a new text/URL field and use that module field and substitue into the video code and replace the src.

[jonchim]

@SBegum because the video was created with a specific aspect ratio and the video section has a fixed height, the video will get cut off. Not sure if there's an elegant solution to scale the video responsively to show the entire video but if you wanted to center it you can use -50% on the #bannerVideo id and change it in the module. Doing this should center the logo pretty close. 

Otherwise if you wanted to capture the entire video you can change height to 100% but the video will not stretch full width or you can set the video to show fullscreen which is also not ideal if that wasn't the look you were going for. 

#bannerVideo {

     top: -50%;

}

@Anton any other suggestions?

[SBegum]

Thank you @jonchim @Anton , i added the below code and it worked .

#bannerVideo{max-height: 600px; object-fit: cover;}

and it worked in the https://www.frommpackaging.ca/demo page. but the sound is muted, i dont know where to unmute, can you please help.

thanks & regards,

sajitha

[jonchim · Accepted solution]

Awesome! @SBegum, looks like you'll ned to remove muted in the video code. Also i think certain browsers mute autoplay video now.

[SBegum]

Hi jon, sorry to bother you again, i couldnt find from where the demo page is taking the video from? i see only no videos added. 

and the video i want to be displayed is below. if i give that in add video it doesnt work

https://cdn2.hubspot.net/hubfs/5045451/final_6078706f6b42b40059162921_500787.mp4

Thanks,

Sajitha

[SBegum]

Thank you jon.. worked perfect. I love hubspot because of its support. You guys are wonderful

[dennisedson]

We have an amazing HubSpot Community thanks to people like @jonchim 

[Anton]

Hi @SBegum,

if you want to display the video in full-height you could modify the CSS from

#bannerVideo{
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
}

to

#bannerVideo{
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

If you want to display the content (Leading global manufacturer...) above the video(in z-index) you'll need to modify/change the rest so the text will be placed correctly

best, 

Anton

[dennisedson]

@Anton , @jonchim , could either of you help @SBegum with this video issue 🙏