HTML5 Video Scale Modes? - Stack Overflow

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs HTML5 Video scale modes? Ask Question Asked 13 years, 11 months ago Modified 7 months ago Viewed 98k times 22

I'm trying to make a fullscreen HTML background, which is easy enough. But because HTML5 video get resized to fit the container while maintaining aspect ratio, I can't get the desired effect.

Are there different scale modes for HTML5 video? I'd like to scale to fill-and-crop.

This is the desired effect done in Flash: http://www.caviarcontent.com/

If you resize the window you'll see it scale and crop. You will never get black bars.

Thanks for the help!

• video
• html
• fullscreen
• scale

Share Improve this question Follow edited Apr 20 at 19:48 Drew Baker asked Dec 7, 2010 at 18:17 Drew BakerDrew Baker 14.4k1515 gold badges6060 silver badges101101 bronze badges 1

• Take a look at this: syddev.com/jquery.videoBG It should be what you are looking for :) – sydlawrence Commented Mar 22, 2011 at 21:31

Add a comment |

5 Answers 5

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 62

Another way to do this with CSS is to use the object-fit property. This works on video or img elements

video { object-fit: cover; }

http://caniuse.com/object-fit

http://dev.opera.com/articles/css3-object-fit-object-position/

This is only compatible in Chrome 31+ but is the simplest CSS solution and is a Candidate Recommendation.

Share Improve this answer Follow edited Aug 28, 2014 at 15:59 answered Dec 31, 2013 at 4:13 MichaelMichael 7,35533 gold badges2525 silver badges1919 bronze badges 5

• 6 I think everyone would love this but it simply isn't an option as of now (16% marketshare support) – marksyzm Commented Feb 19, 2014 at 10:32
• 1 Supported in all recent browserd except IE now, according to MDN – user3035850 Commented Jul 31, 2016 at 10:56
• @DominikGeorge Edge isn't supported either. – oucil Commented Nov 29, 2016 at 2:07
• Didn't work for me :/ - Michael's answer below worked out perfectly. – Stephen Tetreault Commented May 21, 2017 at 20:29
• 96.89% support as of 7/20 – Michael Commented Jul 24, 2020 at 17:33

Add a comment | 26

You can do this just with CSS:

video { position: absolute; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Obviously use the appropriate vendor prefixes for the transform property

Bonus: to do this with an image, you can use "background-size: cover;" to crop the image to the desired space:

.background { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(background-image.jpg) center; background-size: cover; } Share Improve this answer Follow edited Jun 15, 2014 at 23:02 answered Nov 10, 2013 at 4:18 MichaelMichael 7,35533 gold badges2525 silver badges1919 bronze badges 2

• I've found this will stretch an image. – Drew Baker Commented May 19, 2014 at 23:32
• @DrewBaker see modified answer. – Michael Commented Jun 15, 2014 at 23:02

Add a comment | 14

I figured it out by using the same function I wrote about here.

If you have a element on the page, this jQuery resizing function will scale the video to be full bleed of the browser window.

By changing the browserHeight and browserWidth variables you could have the video scaled to fit a DIV (make sure you set that DIV to overflow:hidden).

This function will also resize dynamically with the browser window.

var sxsw = { full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) { // Calculate new height and width... var initW = imgWidth; var initH = imgHeight; var ratio = initH / initW; imgWidth = boxWidth; imgHeight = boxWidth * ratio; // If the video is not the right height, then make it so... if(imgHeight < boxHeight){ imgHeight = boxHeight; imgWidth = imgHeight / ratio; } // Return new size for video return { width: imgWidth, height: imgHeight }; }, init: function() { var browserHeight = Math.round(jQuery(window).height()); var browserWidth = Math.round(jQuery(window).width()); var videoHeight = jQuery('video').height(); var videoWidth = jQuery('video').width(); var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight); jQuery('video') .width(new_size.width) .height(new_size.height); } }; jQuery(document).ready(function($) { /* * Full bleed background */ sxsw.init(); $(window).resize(function() { var browserHeight = Math.round($(window).height()); var browserWidth = Math.round($(window).width()); var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height'); var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width'); var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight); $('video') .width(new_size.width) .height(new_size.height); }); }); Share Improve this answer Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge answered Mar 23, 2011 at 21:34 Drew BakerDrew Baker 14.4k1515 gold badges6060 silver badges101101 bronze badges 1

• 2 A little trick I learned here is that you NEED to add a width and height tag to the element. Otherwise the video pushes off the page to the right. – synth3tk Commented Aug 27, 2014 at 23:49

Add a comment | 5

a quick and dirty with css only:

video { width: 100%; height: auto; max-height: 100%; }

as seen on: http://web.archive.org/web/20171013204829/www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Share Improve this answer Follow edited May 31, 2019 at 6:18 answered Sep 26, 2014 at 9:41 womdwomd 3,4033030 silver badges2323 bronze badges 2

• The linked page is broken. – Victor Zamanian Commented May 28, 2019 at 12:51
• 3 @VictorZamanian - i updated link to a webarchive-version ... cheers – womd Commented May 31, 2019 at 6:19

Add a comment | 1

I use ExtJS 5 to show video, the following code works!

```

var w = Ext.widget('window',{ renderTo: Ext.getBody(), x : 10, y : 10, width: 480, height: 670, maximizable: true, html: '<video style="width: 100%;height: auto;max-height: 100%;" controls playsinline autoplay muted loop><source src="'+url+'" type="video/mp4"></video>' }) w.show()

```

Share Improve this answer Follow answered Jul 9, 2018 at 9:10 Zhouxing FangZhouxing Fang 1111 bronze badge Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• video
• html
• fullscreen
• scale

or ask your own question.

• The Overflow Blog
• The app that fights for your data privacy rights
• Your docs are your infrastructure
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

4 Full Bleed Image Resize Calculation 1 Full Background HTML5 Video Without Letterboxing 0 Restrict Video Height in ASP.Net using Bootstrap

Related

162 Is there a way to make HTML5 video fullscreen? 43 scale HTML5 Video and break aspect ratio to fill whole site 46 Html5 Full screen video 0 Set video.js ui scale 5 HTML5 Video Controls - make larger? 5 HTML5 video with fixed height, but scale width to 100% 6 Safari html5 video fullscreen size 3 Make a video be full screen size CSS 1 Video fullscreen in html5 0 Fullscreen HTML5 video to big?

Hot Network Questions

• Am I correct in assuming during the merger with the Milky Way the structure of the Andromeda Galaxy will not be visible to the naked eye?
• In a Frequentist setting, how are we able to condition on the null hypothesis being True/False?
• Displaying text side-by-side with pie chart
• Is it problematic to use percentages to describe a sample with less than 100 people?
• How can I solve my equation with the best numerical precision?
• 2^N different words with N characters matching a regex of the form [ab][cd]
• Finite subgroups of multiplicative complex numbers.
• Inheritance Tax: the Estate or the Beneficiaries?
• C# basic calculator
• Missile Impact Velocity
• What is the polymorph reached letting the chocolate cool down?
• Normality assumption - qqplot interpretation
• Are "Albergues de peregrinos" typically restricted to pilgrims?
• How to generate conditions before evaluating integral
• Beta sensitivity of the collector current
• How to attribute authorship to personal non-academic friend who made significant contributions
• Problems with Polish letters in Cyrillic books when connecting babel (after upgrading LinuxMint)
• How do I add a trusted check constraint quickly
• Can I freely choose the spellcasting ability of Magic initiate, or is it tied to the spell list that I chose?
• How do different observers decide if they are looking at the same thing?
• About Aristotle and something like "the magic thought"
• How do I create a Solana RPC connection using TypeScript/JavaScript?
• Wouldn't the ban of TikTok violate freedom of speech?
• Can you make 5 x 3 “magic” rectangles?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html