Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – dividing screen in 4 parts

I want to display 4 videos on the screen using react, if I increase the size of one video, the others should adjust accordingly , how can I do it?

I tried the following code

<SplitterLayout percentage secondaryInitialSize={50}>
          {/* Left half */}
          <SplitterLayout vertical percentage secondaryInitialSize={50}>
            <div className='bg-red-500 h-full' style={{ padding: '20px' }}>Top Left</div>
            <div className='bg-green-400 h-full' style={{ padding: '20px' }}>Bottom Left</div>
          </SplitterLayout>
          {/* Right half */}
          <SplitterLayout vertical percentage secondaryInitialSize={50}>
            <div className='bg-blue-500 h-full' style={{ padding: '20px' }}>Top Right</div>
            <div className='bg-slate-500 h-full' style={{ padding: '20px' }}>Bottom Right</div>
          </SplitterLayout>
        </SplitterLayout>
Tags:

2

Answers


  1. 0

    You could use flexbox to have a dynamic layout. You can use gap to separate the boxes from each other.

      .container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .container > div {
    flex: 1 1 calc(50% - 20px);
    min-width: 100px;
    box-sizing: border-box;
  }
    <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
    Login or Signup to reply.
  2. 0

    To display videos and have them adjust their size accordingly, you’ll need to replace the div elements with video elements.

    A little bit of modification to your code:

    <SplitterLayout percentage secondaryInitialSize={50}>
  {/* Left half */}
  <SplitterLayout vertical percentage secondaryInitialSize={50}>
    <video className='h-full' style={{ padding: '20px' }} src="path_to_your_video1" controls>Top Left</video>
    <video className='h-full' style={{ padding: '20px' }} src="path_to_your_video2" controls>Bottom Left</video>
  </SplitterLayout>
  {/* Right half */}
  <SplitterLayout vertical percentage secondaryInitialSize={50}>
    <video className='h-full' style={{ padding: '20px' }} src="path_to_your_video3" controls>Top Right</video>
    <video className='h-full' style={{ padding: '20px' }} src="path_to_your_video4" controls>Bottom Right</video>
  </SplitterLayout>
</SplitterLayout>

    Replace path_to_your_video1, path_to_your_video2, path_to_your_video3, and path_to_your_video4 with the actual paths to your video files. The controls attribute adds video controls, like play, pause, and volume.

    This should create a layout where if you increase the size of one video, the others will adjust accordingly. Ensure that the parent container of the SplitterLayout component has a defined height, as the percentage heights of the children are relative to their parent’s height. If the parent’s height is not defined, the children might not be visible.

    Advise from my side:
    SplitterLayout component might not be the best choice if you want the videos to maintain their aspect ratio when resized. You should consider other libraries or custom solutions for that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search