HTML 5 Video Stretch - Stack Overflow

Trang chủ » Html5 Video Stretch Aspect 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,7583 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
  • Your docs are your infrastructure
  • Featured on Meta
  • More network sites to see advertising test [updated with phase 2]
  • We’re (finally!) going to the cloud!

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

  • A fantasy story with an imp in a box that paints pictures
  • What's the Purpose of the IRQ on a 6502
  • Is Holy Terra Earth?
  • How can I avoid overusing her/she or the character name when describing character action
  • Why is the chi-square test giving unintuitive results?
  • How do I remove a hat from my horse?
  • When my modem places a signal on coax, is that signal still considered Ethernet?
  • How to design for API use cases that need different data from the same table?
  • turn wire frame of ico sphere into a cage
  • The British used to (still?) classify their guns by weight in pounds rather than caliber. Was that a constant across shell types?
  • What was the significance of Mount Doom's eruption?
  • Why sites like Mapgenie don't infringe intellectual property?
  • Should I ask for physical recommendation letters now to avoid future issues with professors' availability?
  • Deutsche Bahn Berlin: can I use a different departure station?
  • Map or Thread operation for list
  • Is there a Prüfer domain that is a UFD but not a PID?
  • What was the female equivalent of πάππας in Ancient Greek?
  • Does ambigous license without a version refer to most recent? Is 'AGPL' currently equivalent to 'AGPL-3.0-only'?
  • Understanding the definition of the covariant derivative
  • Hypothesis and theory
  • Is there evidence that Kurt Gödel took his proof of the existence of God to be conclusive?
  • What's a good way to append a nonce to ciphertext in Python for AES GCM in Python?
  • Can Martial Characters use Spell Scrolls in D&D 2024?
  • Why is a pure copper cathode necessary in the electrolytic refining of copper?
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 Aspect Ratio