HTML 5 Video Stretch - Stack Overflow

Trang chủ » Html5 Video Stretch Ratio » HTML 5 Video Stretch - Stack Overflow

Có thể bạn quan tâm

Just browsing Stack Overflow? Help us improve your experience. Sign up for research
    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 HTML 5 Video stretch Ask Question Asked 14 years, 2 months ago Modified 2 years, 2 months ago Viewed 128k times 73

Can you make a video "stretch" to the width & height of the video element? Apparentlyby default, video gets scaled & fitted inside the video element, proportionally.

thanks

  • video
  • html
Share Improve this question Follow asked Sep 23, 2010 at 15:10 TD540's user avatar TD540TD540 1,7483 gold badges15 silver badges26 bronze badges Add a comment |

6 Answers 6

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

I have tested by using object-fit: fill in CSS

Works good.

video { object-fit: fill; }

From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Value: fill

The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.

Share Improve this answer Follow edited Oct 14, 2016 at 15:38 answered Sep 23, 2016 at 19:19 Leo Yu's user avatar Leo YuLeo Yu 2,8573 gold badges13 silver badges9 bronze badges 3
  • the object-fit doesn't work on ie and edge, so if you want an inclusive solution you should replace it with a hack like 'transform:scaleX(2)'. they both work on the same principle: stretching the video. we should mention that the second solution, being a hack, has its own evil symptom: the video overflows horizontally, resulting in a horizontal scrollbar at the bottom of the page. but we can counter this problem quite easily with 'overflow-x:hidden' placed on the body tag. – shayuna Commented Nov 15, 2018 at 15:37
  • Simple and Smart solution – Vijay Dhanvai Commented Jan 14, 2020 at 6:08
  • Make sure that the video and the container have full width and height. height: 100%; width: 100% – Marian07 Commented Dec 7, 2021 at 17:26
Add a comment | 38

From the spec for <video>:

Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

There are no provisions for stretching the video instead of letterboxing it. This is likely because stretching gives a very bad user experience, and most of the time is not what is intended. Images are stretched to fit by default, and because of that, you see lots of images which are badly distorted online, most likely due to a simple mistake in specifying the height and width.

You can achieve a stretched effect using CSS 3 transforms, though those aren't fully standardized or implemented in all browsers yet, and the ones in which it is implemented, you need to use a vendor prefix such as -webkit- or -moz-. Here's an example:

<!DOCTYPE html> <style> video { -webkit-transform: scaleX(2); -moz-transform: scaleX(2); } </style> <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video> Share Improve this answer Follow edited Sep 23, 2010 at 18:59 answered Sep 23, 2010 at 17:19 Brian Campbell's user avatar Brian CampbellBrian Campbell 332k58 gold badges366 silver badges342 bronze badges 1
  • 5 Great answer. Just to add here for IE, use -ms-transform: scaleX(2); – Riz Commented Oct 14, 2015 at 15:59
Add a comment | 11

This worked perfectly for me

http://coding.vdhdesign.co.nz/?p=29

$VideoElement = $(_VideoElement); //Cache Jquery reference of this var iOriginalVideoHeight = _VideoElement.videoHeight; var iCurrentVideoHeight = $VideoElement.height(); var iVideoContainerHeight = $VideoElement.parent().height(); var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight; var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale; //Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray $VideoElement.css({ "transform-origin": "0% 0%", "transform":"scaleY(" + iScaleY +")", "-ms-transform-origin" : "0% 0% ", /* IE 9 */ "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */ "-moz-transform-origin" : "0% 0%", /* Firefox */ "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */ "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */ "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */ "-o-transform-origin":"0% 0%", /* Opera */ "-o-transform":"scaleY(" + iScaleY +")" /* Opera */ }); Share Improve this answer Follow edited Sep 3, 2015 at 18:14 Gifford N.'s user avatar Gifford N. 4296 silver badges13 bronze badges answered Sep 4, 2013 at 14:24 danivicario's user avatar danivicariodanivicario 1,8011 gold badge17 silver badges23 bronze badges 1
  • 2 You are the only person who made this working like it should be, all the others were giving examples but it was not doing the job. Thank you for sharing. – user285594 Commented Sep 29, 2014 at 10:05
Add a comment | 8

There is also the object-fit CSS property, which will likely give you what you need.

Incidentally, I think this request is realated to How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio? .

Share Improve this answer Follow edited May 23, 2017 at 12:18 Community's user avatar CommunityBot 11 silver badge answered Jun 19, 2011 at 8:10 Silvia's user avatar SilviaSilvia 5535 silver badges5 bronze badges 1
  • A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – dippas Commented Feb 1, 2019 at 12:12
Add a comment | 4

This won't change the proportion of your video but gets rid of ugly 'unfilled' spaces at the top and bottom or sides of your video viewer IF your browser doesn't support the object-fit:cover style.

Let's say you have an in-page viewer that's 500x281 (a proper resizing from 1280x720). But sometimes you may get a video that's not properly proportioned to exactly 16:9, say 1278x720 or 320x176 as in the case of the 'Buck Bunny' video on the W3C site. It would be nice if the video filled the container completely and you don't have to create a new container for every improperly proportioned video.

Given a code fragment like:

<style> #vidcontent { width:500; height:281; border:2px solid #F00; object-fit:cover; /* for those who do support it */ } </style> <video id="vidcontent" width="500" height="281" autoplay controls loop> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video>

will render a video with black or white lines at the top and bottom depending on how your browser handles object-fit. Add the following JavaScript for an on the fly height resizing of the video container making those lines go away by forcing your video container to match the video, at least vertically.

<script type="text/javascript"> vidContent = document.getElementById('vidcontent'); vidContent.addEventListener("loadedmetadata", function(e) { var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight; vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px"; }, false); </script>

We divide the current width of the container by the determined width of the video stream then multiply by the determined height of the video stream. That results in what the height of the container needs to be to force as clean of a fit as possible.

It is important that the video height and width are set as attributes in the HTML in addition to the CSS definition.

Share Improve this answer Follow edited Jan 26, 2017 at 17:03 answered Jan 26, 2017 at 16:45 TadLewis's user avatar TadLewisTadLewis 1519 bronze badges Add a comment | 0

The main thing is setting the object-fit property to fill for the video component, then you can choose any arbitrary values in the video-cover for the aspect ratio

video { width: 100%; height: 100%; object-fit: fill; } .video-cover { width: 50vw; height: 30vw; margin: 2rem; background: #2c3e50; } <div class="video-cover"> <video></video> </div>

Share Improve this answer Follow edited Sep 16, 2022 at 19:02 answered Sep 16, 2022 at 18:59 PuppetMaster's user avatar PuppetMasterPuppetMaster 11 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
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

2 HTML5 video stretch with fixed height 2 How do I stretch a html5 video to width:600 and height 200? 11 How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio? 2 Making HTML5 Video Respect Parent Height / Width 1 Fullscreen video in background 0 How to lock a 3x3 grid to the viewport regardless of content size? 0 Make HTML background video height small and width 100% 1 Full screen video background inside table (horizontal layout) 0 Delete white spaces on html5 video tag in Ionic 43 scale HTML5 Video and break aspect ratio to fill whole site 7 How to reduce the gap between HTML5 video tag 0 how to expand an HTML5 video to touch left/right edges? 3 Stretch html5 video without keeping aspect ratio in jQuery 7 How can I stretch html5 video to full height? 18 HTML5 video fit width OR height 1 How can I stretch the width of my video in HTML? 0 Resizing a video container 1 How to make video responsive using video tag in html? 0 Stretch the video to the entire browser

Hot Network Questions

  • What does GB Shaw mean when he says "like the butcher's wife in the old catch" here?
  • Getting into a 2008 passat with a dead battery and the extra fob key isnt working
  • Oustanding medical bills impact on visa
  • how to reduce the width of top square root line
  • How to sample a single point from a volume
  • Is it possible to add arbitrary ammounts of quantum resistance cheaply?
  • Likely source of a hot-cold crossover?
  • How to generate conditions before evaluating integral
  • How to protect against fake gold bars?
  • Do longer papers have lower chances of being accepted because they take up more "space" in a journal issue (STEM)
  • Can I freely choose the spellcasting ability of Magic initiate, or is it tied to the spell list that I chose?
  • Can a storage device completely erase itself while performing the erase?
  • Why is S5 modal logic universal?
  • What is the complexity of modulo order-finding problem on classical computer?
  • How to attribute authorship to personal non-academic friend who made significant contributions
  • Is there any penalty for providing half cover to another creature?
  • Why Adam and Eve were created naked?
  • Short story about a man living In an apartment who's curious about his neighbor who turns out to be a monster or demon
  • Is it ok to make a wrapper method just for readability? And is this example more readable with a wrapper method?
  • In a Frequentist setting, how are we able to condition on the null hypothesis being True/False?
  • Missile Impact Velocity
  • What is the polymorph reached letting the chocolate cool down?
  • Can you please advise on kerning?
  • Does midnight (00:00) mean the time at the end of day depending on the locale for cron?
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

Từ khóa » Html5 Video Stretch Ratio