Html5 Video Stretch? [SOLVED] - DaniWeb

Trang chủ » Html5 Video Stretch Aspect Ratio » Html5 Video Stretch? [SOLVED] - DaniWeb

Có thể bạn quan tâm

html5 video stretch?
  1. Home
  2. Programming Forum
  3. Web Development Forum
  4. Discussion / Question
Member Avatar for James_43

Hi all,

I have a HTML video within a div that is 100% width of the page. I want the video fill the container and crop the height to fit. But so far I cannot get the video to expand at all!

I'm simply using:

.video { width:100%; }

and

<div class="main-content"> <video class="video" autoplay loop"> <source src="/wp-content/themes/StrongLinks/video.webm" type='video/webm'/> <source src="/wp-content/themes/StrongLinks/video.mp4" type='video/mp4'/> </video> </div>

Can someone explain why the video object isn't obeying the 100% width command?

html-css video 0 0 Share
  • 2 Contributors
  • 5 Replies
  • 3K Views
  • 4 Hours Discussion Span
  • Latest Post 9 Years Ago Latest Post by James_43
Member Avatar for rproffitt Last Seen 3 Hours Ago

I think it's been hurting heads for many years now. https://www.google.com/#q=html5+video+stretch finds you may have to find other video players or just bite the bullet and make the video exactly what you want in the first place.

0 0 Share Member Avatar for James_43

So does that mean if I want a video to fill a div, that obviously changes in aspect ratio depending on the screen its viewed on... then I can't do that??

0 0 Share Member Avatar for rproffitt Last Seen 3 Hours Ago

James, I supplied the search so you could see the priors. Check the latest HTML5 video standards. I read this:

Quote from the HTML5 spec for <video> tags:

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. 0 0 Share Member Avatar for James_43

I understand that a stretched video will cause letterboxing or pillarboxing. But them problem I am having is setting the width/height of the video element. For example, the CSS:

.video { width: 100px; height: 200px; }

does not cause letterboxing, instead the element only obeys the width constraint. My question is why doesn't the video element also obey the height constraint and display with letterboxing?

0 0 Share Member Avatar for James_43

Solved. Adding position: fixed; to my CSS allows the video element to follow the constraints.

0 0 Share Share Facebook Twitter LinkedIn Reply to this topic Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Sign Up — It's Free! Related Topics
  • Member Avatar HTML & CSS - li items/ div's are going where they should. 2
  • Member Avatar html5 video embedding - need help 10
  • Member Avatar Can't save file in php 2
  • Member Avatar HTML and CSS 1
  • Member Avatar SQL Array 2
  • Member Avatar Css Horizontal Dropdown Menu Visibility Problem 1
  • Member Avatar Dynamically modifying the CSS attributes through Javascript 2
  • Member Avatar video.js youtube Uncaught reference error: videojs is not defined 4
  • Member Avatar how to generate rows in table dynamically 3
  • Member Avatar html5 video - safari wants to download it all 2
  • Member Avatar Alter object properties in the array 3
  • Member Avatar Background video controls don't work 3
  • Member Avatar Time Zone on PHP 4
  • Member Avatar Css height issue 3
  • Member Avatar dissappearing variables 1
  • Member Avatar Fill remaining width among inline-block divs with self 3
  • Member Avatar Checkbox showing array instead of chosen options 3
  • Member Avatar Xuggler Audio Recorder not working, and video longer than it should be 6
  • Member Avatar Css Expand/hide Div 4
  • Member Avatar Problem in some HTML CSS Properties 2
Not what you need?

Reach out to all the awesome people in our web development community by starting your own topic. We equally welcome both specific questions as well as open-ended discussions.

Start New Topic Topics Feed Reply to this Topic Edit Preview Message H1 H2 Post Reply

Share Post

Permanent Link Facebook Facebook Twitter Twitter LinkedIn LinkedIn

Insert Code Block

Insert Code Block Search Search
  • Forum Categories
  • Hardware/Software
    • Recommended Topics
  • Programming
    • Recommended Topics
  • Digital Media
    • Recommended Topics
  • Community Center
    • Recommended Topics
  • Latest Content
  • Newest Topics
  • Latest Topics
  • Latest Posts
  • Latest Comments
  • Top Tags
  • Topics Feed
  • Social
  • Forums
  • Top Members
  • Meet People
  • Community Functions
  • DaniWeb Premium
  • Newsletter Archive
  • Markdown Syntax
  • Community Rules
  • Developer APIs
  • Connect API
  • Forum API Docs
  • Tools
  • SEO Backlink Checker
  • Legal
  • Terms of Service
  • Privacy Policy
  • FAQ
  • About Us
  • Advertise
  • Contact Us
© 2024 DaniWeb® LLC

Từ khóa » Html5 Video Stretch Aspect Ratio