migrate videos to cloudinary + add poster frames everywhere#653
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
moved all videos off imagekit and onto cloudinary, added poster images so there's no blank flash before videos load, and cleaned up some loose code along the way.
what changed
video hosting → cloudinary
all feature videos and the hero video are now served from cloudinary with
q_80quality and capped width (w_900for features,w_1200for hero). this replaces the imagekit urls that were either uncompressed or had unreliable on-the-fly transforms.poster frames on every video
both
LazyVideoandHeroVideonow accept aposterprop — cloudinary auto-generates a.jpgthumbnail at the same transform url, so we just swap the extension. users now see a real first frame instead of a blank/black box while the video loads.featureVideosmap updatedchanged the map values from a plain string to
{ video, poster }so each feature has both the video url and its poster. destructured cleanly at the render site.hero video also migrated
HeroSectionnow passes bothsrcandpostertoHeroVideo. the cloudinary url has the same compression settings.code cleanup
Imageimport fromHeroSectionsetInViewfrom an if/else to a one-linersetTimeoutcallback to a single expressionfclassname on the svguseStateanduseCallbackimports fromFeaturesSectionwhy
imagekit's real-time transforms were flaky and the videos had no poster so there was always an ugly blank flash before playback. cloudinary gives us reliable compression with auto-generated posters from the same url.
NOW