scale HTML5 Video and break aspect ratio to fill whole site

by

this a really old thread, I know, and what I’m proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact

If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

I hope this can be of help for some people.

EDIT: works in most browsers but IE

More Related Contents:

  1. Make HTML5 video poster be same size as video itself
  2. Animate text for landing page
  3. How do you get the footer to stay at the bottom of a Web page?
  4. CSS – Equal Height Columns?
  5. Floating elements within a div, floats outside of div. Why?
  6. How to style HTML5 range input to have different color before and after slider?
  7. Margin-Top not working for span element?
  8. Select elements by attribute in CSS
  9. 2 column div layout: right column with fixed width, left fluid
  10. How to add a scrollbar to an HTML5 table?
  11. Center a div in CSS [closed]
  12. Font Awesome not working, icons showing as squares
  13. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  14. How do I style the HTML5 form validation error messages with CSS?
  15. Right to Left support for Twitter Bootstrap 3
  16. override css for html5 form validation/required popup
  17. CSS values using HTML5 data attribute [duplicate]
  18. Make outer div be automatically the same height as its floating content
  19. Remove “whitespace” between div element
  20. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  21. CSS text ellipsis when using variable width divs
  22. How to push a footer to the bottom of page when content is short or missing?
  23. Styling HTML and BODY selector to height: 100%; vs using 100vh
  24. Can I replace the expand icon (▶) of the element?
  25. How can I align 3 divs side by side?
  26. Styling browser-native video controls
  27. How to add bordered triangle over a div tag
  28. Trouble (vertically) Centering Text in another DIV with relative % sizing
  29. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment