I’m peering into building a website doubling as my photography/videography portfolio and nutrition shop. The logo itself is a .mp4 or .gif (it’s a couple of words orbiting a logo perpetually lol) and I’m not entirely sure what the appropriate strategy for showcasing it on my website is. I’ve reviewed and most people appear to upload unlisted videos they want linking onto their website to YouTube and use the embed code choice to paste them onto their HTML files. The question is if that’s the ‘professional’ standard of video logos/videos on websites across-the-board. I’m predisposed to assume it’s not, particularly if I want to make that logo interactive/responsive. I’m questioning because I want to have the header frozen and the logo frozen as a user scrolls. The header would stay on the site at all times but I want an overlapping video below the logo to “take over” the logo and hide it for the remainder of the index (landing page). I’m aware this is a ton to disseminate, and I apologize if a lot of these approaches are meant to be straightforward, yet I just started learning web dev 9 days ago and I’m reasonably acquainted with HTML, CSS, JS, DOM, React, SQL now, but it all still feels a bit disjointed and I’m endeavoring to function past that confusion. I have a Figma prototype that more accurately portrays what I’m endeavoring to capture I can share if that would help answer my questions (I’ve been for the past year more acquainted with only web design/UX the past year now trying to pivot into turning my designs into websites myself for some background).
Not sure I totally understood what you’re planning.
Using external resources – especially Youtube – for a logo is not a good idea for numerous reasons, e.g.:
- You have to embed it as an iframe – meaning you can’t manipulate it for responsiveness or react to user action like scrolling etc.
- Youtube saves cookies – so you’d need to request a consent from your visitor before you may display it
From what I understand it would be worth looking into Lottie animations:
There are several tutorials and guides out there on how to make Lottie animations and how to embed them into your website. If you work with Adobe After Effects, try the Bodymovin extension for After Effects:
