Change video object-fit to cover within Cloudflare Stream

I’m replacing a Flowplayer-hosted video with Cloudflare Stream. I’m looking to implement the video as a responsive background video, but the video never covers the entire parent element because the video element inherits the object-fit:contain rule from the user agent stylesheet.

Because the video element is inside of an iframe pointing to a page that is not on the same domain as my site, I cannot implement the CSS rule on my end to fix the display of the video (which should be object-fit:cover instead of object-fit:contain).

As an example, you can visit (at the time of this original post) iTechRepairs.ca to see that the video background does not properly cover the parent element despite the iframe being sized and positioned correctly. If you inject object-fit:cover to the video element’s CSS using the developer tools it displays correctly as intended.

Even setting the responsive setting on the video in the code generator on the Cloudflare Stream Dashboard does nothing to support this fully-responsive implementation.

Finally, my question of course is: How do I get the video to inherit the object-fit:cover css rule?

1 Like

Thank you @chris107 for the great question! It is correct that we use object-fit:contain in the Stream player because we make certain assumptions around how the video is going to be viewed using the Stream player.

We don’t allow CSS injections on the video element of the Stream player because the player also handles playback buttons, captions and other options that expect the video to be contained in the player container.

My suggestion is to use a <video> element you manage and set the object-fit: cover CSS rule on that video element. You can do this by using a JS library such as HLS.js and the .m3u8 manifest URLs from Stream. We’ve added an example about this here: https://developers.cloudflare.com/stream/viewing-videos/using-own-player (scroll down to the section about backgrounds).

Let us know if this is helpful!