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
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?