Share Your Work

stefen
Key Advisor | Partner
Key Advisor | Partner

Redesigned About Page: Team Member Videos

I recently redesigned our about page and replaced our team photos with HTML5 videos that look like photos (until you rollover them). We think this adds an extra layer of personality to our agency and really makes for a delightful experience.

 

The downside to this design is possible performance issues.  To counteract this I've disabled video preloading so it isn't too heavy on first load and used VP9 encoded WebM files. What do you think? Is it cool and unique or do you think the performance losses outweigh the benefits?

Stefen Phelps, Community Champion, Kelp Web Developer
8 Replies 8
tahsin
Participant

Redesigned About Page: Team Member Videos

very creative! Had a small jerk on the hover before the video started playing but the quality and all was great. Smiley Happy

 

0 Upvotes
NiallByrne
HubSpot Employee
HubSpot Employee

Redesigned About Page: Team Member Videos

Woooah @stefen, love this! Really cool.

 

I did have performance issues with the videos though. The were a little jerky. Is it possible to make them gifs and on hover swap to the amimated gif rather than the static pic? Would that perform better. #IveNoIdea

stefen
Key Advisor | Partner
Key Advisor | Partner

Redesigned About Page: Team Member Videos

@NiallByrne Thanks for the feedback!

That might be a better solution. However, I think the primary issue lies on iOS/Safari and IE which don't support WebM videos. GIF's might be better than the MP4 files but I doubt they would perform better or be a smaller file size when compared to the WebM videos. And our video guy is extremely persistent about keeping the resolution/quality very high 😣 😞 😒

Stefen Phelps, Community Champion, Kelp Web Developer
Samantha_Alford
Top Contributor

Redesigned About Page: Team Member Videos

Hey @stefen, this sounds like a great idea. I had a look and am on iPad so I couldn't see how they work in iPad. I clicked on a couple of images and they stayed as image, no video, so not sure if that's what you intended in mobile devices?

 

thanks for sharing the idea.


Samantha Alford
Did my post solve the issue? If so, please accept it as a solution!
stefen
Key Advisor | Partner
Key Advisor | Partner

Redesigned About Page: Team Member Videos

Hey @Samantha_Alford, thanks for the feedback. Due to lack of hover on mobile, we think this a fine fallback.  I think it's a good example of progressive enhancement actually.

Stefen Phelps, Community Champion, Kelp Web Developer
Samantha_Alford
Top Contributor

Redesigned About Page: Team Member Videos

Hey @@Steven, I thought that must have been the case. What I love is that the photos look stunning on iPad regardless, so it doesn't come across as "gymicky" on either device, it just looks classy and professional. Great job achieving both so seamlessly!


Samantha Alford
Did my post solve the issue? If so, please accept it as a solution!
stevejames
Participant | Platinum Partner
Participant | Platinum Partner

Redesigned About Page: Team Member Videos

Nice work Stefen! They load fast, definitely add personality to your about page. Thanks for sharing this.

 

Steve

 

stefen
Key Advisor | Partner
Key Advisor | Partner

Redesigned About Page: Team Member Videos

Thanks for the feedback @stevejames!

Stefen Phelps, Community Champion, Kelp Web Developer