How do I get a video to fit in a specified area?


Tags: html,css,video,html5-video

Problem :

How would I go about fitting a video to a specified area? I'm trying to fit my 960px by 500px video to fit into the corresponding matching area, but when I try to it's doing this:

enter image description here

I'd like to have the video fit into the red area.

Here is my HTML:

<div id="mainvideo">
<video width="960" height="500" controls>
<source src="videos/moikitvideo.mp4" type="video/mp4">
<source src="videos/moikitvideo.webm" type="video/webm">
 Your browser does not support the video tag.
</source>
</source>
</video>
</div>

Here is my CSS:

#mainvideo{
  width: 960px;
  height: 500px;
  float:left;
  margin-top:10px;
  background-color:#75A96F;
}


Solution :

I believe this is due to padding. Without a jsfiddle or anything I can't really tell though. Try this:

#mainvideo{
  width: 960px;
  height: 500px;
  float:left;
  margin-top:10px;
  background-color:#75A96F;
  padding: 0;
}

This could also be due to the video ratio itself. I wouldn't worry about the height and focus on the width. Make sure the width fits and allow the height to scale. So set height to 100% or auto once you have the video fitting perfectly width wise.


    CSS Howto..

    How to make a list float to the right in CSS?

    How to apply alternate background color for each column in CSS columns

    How to reset the CSS of HTML Elements?

    How to create a dropdown with lu and li tags like this

    How to make html button look pressed in using css?

    Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

    Bootstrap - how to clear css from element to start over?

    How to align text and image in a CSS box?

    How to capitalize first letter with JSTL/CSS?

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    How do I get text in my html page to display features using the css stylesheet?

    How to force margins to be ready from js before document ready

    How to display an image in the right upper corner of an input box

    How to make CSS animation not reverse after finishing? Example inside

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    Push vertically resizable Div to bottom of wrapper. How?

    How to add pictures around a background through CSS?

    How to make the height of the div take all the space?

    How to combine jQuery animate with css3 properties without using css transitions?

    how to use querySelector to select dynamic added elements

    How to create rounded shape by CSS

    How to get text within div to be relative to the div's width and height, CSS, HTML

    How to get color property from CSS with jQuery?

    How to refactor an existing project to use Compass?

    How do I add a logo into the nav bar in CSS?

    How can I add a border INSIDE this element?

    How to create 10 CSS classes, each having 10% darker gray background with LESS?

    jquery - how to queue up a series of css property changes

    How to select ids which contain special characters?

    How to achieve a two column centered layout, with the main column expandable on wider screens?