0

I am attempting to put together a basic frontend holographic pyramid webapp that takes a video and displays it in 4 windows generally equidistant from each other in a square pattern. Below is an example:

enter image description here

I went ahead and set up a basic layout that mimics what I want (MOBILE VIEW IN BROWSER):

enter image description here

I am now attempting to substitute the writing with video components from react-player but when I do the videos do not align and change sizes:

enter image description here

I am unsure how best to correct this. I have a code sandbox here:

https://codesandbox.io/s/hologramvideo-952so?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

All I have done is replaced "TOP", "BOTTOM" etc with <ReactPlayer />. Not sure how best to correct this. Appreciate some direction and/or help.

LoF10
  • 1,907
  • 1
  • 23
  • 64

1 Answers1

0

Grid is probably your Friend here.

Go and lookup the MDN Documentation. They have pretty straight forward examples.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Florian Bauer
  • 11
  • 1
  • This doesn't help much. I just tested react-player using the documentation from grid that you recommended and I get a similar result where some of the components are warped or change size: https://codesandbox.io/s/gridtest-i1m1c?file=/src/App.js. – LoF10 Feb 01 '21 at 18:39