CSS object-fit is background-size:cover; for video!

Apr 13 2015

Have you ever wished you could use background-size:cover; on regular elements? Well, it turns out you can with a CSS property called object-fit – and with the recent release of FireFox 36, we can start to use it in our designs as we have really good browser support for it.

See the Pen Object Fit for Videos by Wes Bos (@wesbos) on CodePen.

It’s a popular design trend to have videos and images span the entire width and height of an element. Problems arise when it comes to the media’s ratio – they never quite fit perfectly width and height wise – especially with dynamic content and responsive viewports.

Enter object-fit. It’s a new CSS3 property that we can use to stretch embedded media (videos and images) across the entire parent, while still maintaining the aspect ratio. No JavaScript required!

How does it work? It’s pretty easy – first you start with a container that has a defined width and a height on it – for our purposes I’m using viewport units so get a perfect 100% width and height of the screen. Then on the video or image itself, we use object-fit: cover;. You’ll now see the video span across the entire element – it’s cropped either at the left/right or the top/bottom to ensure full coverage.

We can also use object-fit:contain;, which is the same as background-size:cover;, it won’t crop the video but rather show ensure the entire video is always visible. There are a few more values available, but these are the most likely use cases when trying to replicate background-size:cover; with a video.

Check out the demo – http://codepen.io/wesbos/full/YPmyxy/ or view the code below. Enjoy!

This entry was posted in CSS. Bookmark the permalink.

10 Responses to CSS object-fit is background-size:cover; for video!

  1. Really handy, thanks for that! Also, in the second last paragraph, I’m sure you mean “object-fit: contain;”?

  2. Manish jain says:


  3. Nimsrules says:

    I got so excited, read the entire article and them came to the browser support and IE made me cry all over again :'(

  4. Pingback: Maria's Developer Blog – Custom HTML5 Video Player

  5. Shane says:

    Have you used wordpress’s twentyseventeen them yet?

    How do you apply this to the video header of this theme? I can’t find an answer anywhere

  6. Ricky says:

    As usual ! One of the best teacher. Thank you so much sir 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *