If you don't find an answer, please click here to post your question.
Reply
Occasional Visitor
Posts: 2
Registered: ‎11-02-2018

Dynamically changed player size is causing misaligned skin overlay

Hi,

 

Does anyone know how to make sure the player V4 skin resizes correctly if you dynamically change the player size once it's been initalised?

 

We have a player which we would like to popout (A user can control this). Once the player pops out everything resizes but the video scrubber gets out of line. We have tried to use the message bus

 

player.mb.subscribe(OO.EVENTS.SIZE_CHANGED, 'Size changed', () => {
  console.log(`Player sized`);
});

Which correctly fires on resize but we can't see a way to re-render / reinitialise the controls.

 

Any help will be appricated.

 

Thank you,

dynamically-resized-player-scrubber-issue.png
Visitor
Posts: 2
Registered: ‎08-17-2018

Re: Dynamically changed player size is causing misaligned skin overlay

Hi Wright,

 

Thanks for posting on our community board!

 

The player V4 by default will resize dynamically when the size of the container of the player is changed.

 

Could you please help us to provide a little more information about your implementation?

 

Which player version are you using?

 

Are there any changes to the skin or CSS of the player being applied?

 

Thanks!

Ooyala Technical Support

Victor Escoto

 

Occasional Visitor
Posts: 2
Registered: ‎11-02-2018

Re: Dynamically changed player size is causing misaligned skin overlay

[ Edited ]

Hi Vescoto,

 

I hope the following helps:

 

Player version: 4.28.18 (https://player.ooyala.com/static/v4/stable/4.28.18/core.min.js)
Skin version: 4.28.18 (https:https://player.ooyala.com/static/v4/stable/4.28.18/skin-plugin/skin.json)

 

We are not applying any specific styles to the player, in this example, we are just resizing the video player container and setting position: absolute;

 

The skin is resizing correctly on mouse over but it's the scrubber which goes out of sync. As you can see from the original posts attachment, the scrubber is keeping the original size "placement" but the loaded/played time is resized correctly.

 

We have noticed that if you click the share controls and then close the share controls, the scubber is then correct. This seems to be due to “share controls” unmounting and remounting the react component. I'm hoping there is a method we can use to re-render / reinitialise the controls as we can't access the React component.

 

Kind regards,