Plyr: show video full width and height without black bars.

[techhahn]

Is there a way to show video in full width and height of its parent container without showing black bars? or to emulate object-fit: fill; in javascript

[adxmcollins]

If you are using YouTube/Vimeo embed then letter-boxing is the default in order to maintain the video aspect ratio.

There are a number of workarounds for this, but nothing solid and sure-fire to work from my own experience.

However if you are using self-hosted video (or hosted video with direct access to the video files), you have a bit more control over the output and can do what you want with just CSS alone.

[JoeEarly]

Any examples @adaamcollins ? @sampotts

I have an issue where a youtube video wont fill its bootstrap container unless padding is adjusted, which intensifies the back bar issue.

I also have a locally hosted video where the above CSS hack doesn't work and the video is now smaller then the rest.

[adxmcollins]

@JoeEarly do you have the code on a repo? Would be easier to be able to take a look at the code itself and do a bit of troubleshooting.

The reason why upping the padding is making the letter boxing worse is because padding of 56.25% represents a 16:9 aspect ratio, which most videos generally are.

[JoeEarly]

Ill upload it to my test site here and is it ok to email you the URL? Like to keep most of it under wraps for now. We can continue the chat here in relation to the fix to help others

[adxmcollins]

Yeah go for it, my email is on my profile.

[sampotts]

There's an aspect ratio option coming in v3 for YouTube and automatic setting for Vimeo (as we can grab dimensions via API). HTML5 is determined by the video's aspect ratio.

[mithri]

Hi,
any info on how to achieve object-fit:fill with v3?

Thanks for this great player!

[friday]

For html5 video, you simply add it to the css for the video element and override the size of it's parent. It's pretty well supported by now.

It won't work in IE11 however, and in Edge it only works for the image element.
It also won't work if your video element is in an iframe (youtube or vimeo).

[justiny]

This worked for me:

.plyr__poster {
  background-size:cover;
}

[friday]

background-size works for the poster element, but not the video. The video is not a background-image and hence you need to use object-fit, which doesn't work in IE (or Edge yet for video), and only for html5 video.

If you know the original aspect ratio and the grid aspect ratio you can use css transform: scale() to emulate this on the video/iframe-element as well.

[tobireif]

Great tips! This removed the black bars from my self-hosted video:

.plyr__poster {
  background-size: cover;
}
video {
  object-fit: cover;
}

[robbygeybels]

Anyone here who was able to do it for Vimeo embeds ?

[paullacour]

@robbygeybels I wanted to accomplish a full page cover video and did it with a little CSS sorcery for a Vimeo Embed:

    .plyr {
      width: 100%;
      height: 100%;
    }
    .plyr__video-wrapper {
      width: calc((100vh - 2rem) * 1.77777778);
      min-width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }