Expand video player to fill available space

Hello,

we’d like to create a video playback experience much like Instagram and TikTok on mobile: full screen videos with the title, description, controls, etc. overlaid on top. To achieve this we need to expand the video to fill the whole screen without forming black bands on the sides.

In other words, we’d like to go from this (which is the default behaviour):

to this i.e. video expands to fill the available space (no black bars on the sides).

This can be achieved in CSS by setting the object-fit of video element of the player to cover (and update the poster image accordingly through the .vsj-poster class). However, I’m not sure it’s possible (or desirable) to update CSS in an iFrame.

Can we achieve this behaviour by setting an option when initialising the player? Ideally there’d be something similar to the chromeless option or the requestFullScreen() method.

We’d rather not swtich to another player as we’ve got api.video’s up and running now.

Hi Simeon,

We’ve just released a new version of the player-sdk with this feature, you can now do something like that:

player.setVideoStyleObjectFit("cover"); // Set the object-fit to cover

Please let us know if that meets your needs.

Best,

Olivier

1 Like