How to change the fullscreen element?

[debjits1]

Have you read the Tutorials?
Yes

Have you read the FAQ and checked for duplicate open issues?
Yes

What version of Shaka Player are you using?
4.3.0

Please ask your question
I am trying to add a sidebar beside my video, and I am using custom ui element.
The problem which I am facing is, the ui controls are overlapping the sidebar on fullscreen.
As per my understanding, this is because the container for both ui controls and sidebar is same.
I am looking for a way to change the fullscreen element so that I can keep the sidebar in a different container. Can anyone help me here?

[WINOFFRG]

Are you using Shaka Player Default UI or some custom? It looks like some CSS Issue. In Chrome, Firefox, etc - If you are on full screen, top-layer will be applied.

[debjits1]

Are you using Shaka Player Default UI or some custom? It looks like some CSS Issue. In Chrome, Firefox, etc - If you are on full screen, top-layer will be applied.

I am using custom UI.

[WINOFFRG]

I guess it is then related to CSS stuff and not Shaka specific. However, feel free to share screenshots, or code snippets or codesandbox link.

[joeyparrish]

I'm assuming that you built your own UI in HTML + CSS + JS, and that you're not using shaka-player.ui.js. Is that correct?

From your diagram, it looks like you currently have something structured like:

<div id="container">
  <div>
    <div id="video"></div>
    <div id="sidebar"></div>
  </div>
  <div id="controls"></div>
</div>

But what you want is to have a structure like:

<div id="container">
  <div>
    <div id="video"></div>
    <div id="controls"></div>
  </div>
  <div id="sidebar"></div>
</div>

Does this help?

[github-actions]

Closing due to inactivity. If this is still an issue for you or if you have further questions, the OP can ask shaka-bot to reopen it by including @shaka-bot reopen in a comment.

[debjits1]

@shaka-bot reopen

I'm assuming that you built your own UI in HTML + CSS + JS, and that you're not using shaka-player.ui.js. Is that correct?

From your diagram, it looks like you currently have something structured like:

<div id="container">
  <div>
    <div id="video"></div>
    <div id="sidebar"></div>
  </div>
  <div id="controls"></div>
</div>

But what you want is to have a structure like:

<div id="container">
  <div>
    <div id="video"></div>
    <div id="controls"></div>
  </div>
  <div id="sidebar"></div>
</div>

Does this help?

@joeyparrish

I don't have a separate element created for controls. Below is the code snippet which I am using.
I am marking the elements which I want to make the fullscreenElement in code snippet below.

const ui = new shaka.ui.Overlay(player, videoContainer, video);
...
<div className={classes.root}>
      <div className={classes.videoAspectRatioWrapper}> // The element I want to be the fullscreen element
        <div ref={videoContainerRef}>  // This is the current fullscreen element
          <video id='video' ref={videoRef} className={classes.video} muted autoPlay playsInline />
        </div>
      </div>
      <SideBar />
</div>

The problem with this code is when I try to move Sidebar inside <div ref={videoContainerRef}>, it starts overlapping the controls.

Would you be able to help me here?

[joeyparrish]

The Shaka Player UI doesn't let you choose the fullscreen element. That is hard-coded to the container. So if you want Sidebar to show in fullscreen mode, you'll want to move it inside the container.

I would suggest adjusting the styles to make it sit where you want, and to make the controls take up the same space as the video element instead of the whole container.

Alternately, you could modify Shaka Player to use a different class to declare the fullscreen element, or to add a method on Overlay to change the fullscreen element (which would default to the video container). This may be easier than restyling everything.

Does this help?

[debjits1]

Thanks for the suggestion @joeyparrish . I would update the method to select fullscreen element.
But, since I am very new to shaka player, it would take some time for me to update the method.
So, I would keep this issue open and request everyone who come across this issue to help me out with a PR.