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
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
We’d rather not swtich to another player as we’ve got api.video’s up and running now.