CMS Development

SBegum
Participant

Replacing Home page banner video.

SOLVE

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.

SBegum_0-1618433250111.png

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

0 Upvotes
1 Accepted solution
jonchim
Solution
Guide | Diamond Partner
Guide | Diamond Partner

Replacing Home page banner video.

SOLVE

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

Screen Shot 2021-04-15 at 4.36.54 PM.png






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

10 Replies 10
ACoasta
Member

Replacing Home page banner video.

SOLVE

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. 

0 Upvotes
jonchim
Guide | Diamond Partner
Guide | Diamond Partner

Replacing Home page banner video.

SOLVE

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.






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
jonchim
Guide | Diamond Partner
Guide | Diamond Partner

Replacing Home page banner video.

SOLVE

@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%;
}

Screen Shot 2021-04-15 at 10.37.56 AM.png

 

@Anton any other suggestions?






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
SBegum
Participant

Replacing Home page banner video.

SOLVE

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

 

 

 

0 Upvotes
jonchim
Solution
Guide | Diamond Partner
Guide | Diamond Partner

Replacing Home page banner video.

SOLVE

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

Screen Shot 2021-04-15 at 4.36.54 PM.png






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
SBegum
Participant

Replacing Home page banner video.

SOLVE

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. 

SBegum_1-1618520305480.png

 

SBegum_0-1618520284180.png

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

0 Upvotes
SBegum
Participant

Replacing Home page banner video.

SOLVE

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

dennisedson
Community Manager
Community Manager

Replacing Home page banner video.

SOLVE

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

 

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
Anton
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Replacing Home page banner video.

SOLVE

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

 




check
Did my post help answer your query? Help the Community by marking it as a solution



dennisedson
Community Manager
Community Manager

Replacing Home page banner video.

SOLVE

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

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show