Redesigned About Page: Team Member Videos

[stefen]

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?

[tahsin]

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

[NiallByrne]

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]

@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 😣 😞 😒

[Samantha_Alford]

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.

[stefen]

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.

[Samantha_Alford]

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!

[stevejames]

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

Steve

[stefen]

Thanks for the feedback @stevejames!