0

Use case: I have a client who'd like on their homepage to have a gif version of a video that, when clicked, opens up a full screen video player. How can I manage this? I've been building the site in the NextJS framework.

I'm looking to do something like this but instead of autoplaying an mp4, auto loop a gif of the video and, upon clicking the gif, play mp4 in fullscreen.

Any help would be greatly appreciated - I've never really messed with videos in React.

mckman
  • 15
  • 4

2 Answers2

0

i would create a react state and set it to false then onClick of the gif i will update the state to true then have a conditional statement to show the video in fullscreen when the state turns to true

and set the state back to false when video is removed from full screen

Emmanuel Bayode
  • 49
  • 3
0

There is no one way to do this but the beauty of React are components. You are definitely going in the right direction. I would actually do two separate components, one for background and one with the video player. That is cleaner and good practice to separate concerns in code.

Simply swap components conditionally, as in this simplified example;

if(onclick) {
  render (
    <Player />
  ) else {
    <Index />
 }
}

You can very well use state to set the conditions. The only problem in React is that components technically do not share state but on the other hand, the "background component" only needs to know if its in the foreground and if it receives an onClick event. The video component only needs to know about its own onClick to for it to disappear again. So two separate event handlers is no issue in this very specific case.

mydogspies
  • 147
  • 1
  • 10