Learn how to create a responsive video player using the React Player component from Pete Cook, as well as how to use a callback prop to change an element’s state based on how much of the video a user has watched.
⏰ TIMESTAMPS ⏰
CodeSandbox Setup: 1:48
React Player Intro: 3:37
How to Install React Player: 4:30
Create Responsive Video Component: 4:58
Controls Prop: 8:23
onProgress Callback Prop: 10:30
Create Lesson Component: 12:23
useState React Hook: 14:09
handleWatchComplete Function: 15:45
Write CSS for Lesson Component: 19:41
👀 LIVE DEMO 👀
https://react-responsive-video-player.netlify.com/
🗂 DOWNLOADS 🗂
🔗 HELPFUL RESOURCES 🔗
CodeSandbox.io: https://codesandbox.io
React Player by CookPete: https://github.com/CookPete/react-player
Aspect Ratio Boxes: https://css-tricks.com/aspect-ratio-boxes/
React Hooks: https://reactjs.org/docs/hooks-intro.html
Introducing JSX: https://reactjs.org/docs/introducing-jsx.html
👋 FOLLOW US 👋
Instagram: https://instagram.com/skillthrive/
#React #LearnToCode #WebDev
#react #video player
