CODEWITHSUNDEEP
htmlcssvideo
David Gard
David Gard

Reputation: 12047

<video> tag adding 3px of whitespace to the right

I have several videos on my website and wish them to be displayed at a certain size. All is working fine, except that for some bizarre reason 3px is added to the left of each video tag.

I've tested the following with margin-right set to 0 and there is still 3px of white-space visible, even though Firebug doesn't register it.

How can I fix this issue? Thanks.

Here is the HTML I am using -

<video class="video-preview" controls="">
    <source type="video/mp4" src="http://localhost/wp-content/uploads/2014/05/Everyone-Bat-Out-of-Hell.mp4"></source>
    Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>

And here is the the CSS -

video{
    background-color: #FFFFFF;
    cursor: pointer;
    vertical-align: middle;
}
#gallery .video-preview{
    height: 118px;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 210px;
}

Upvotes: 0

Views: 868

Answers (1)

Jon P
Jon P

Reputation: 19772

As a video element is inline by default, white space between tags are rendered with a space between them. Much like if you had <span>a</span> <span>b</span> it would be rendered as:a b. Therefore if you have the following:

<video>....</video>
<video>....</video>
<video>....</video>

There will be a space rendered between each of the video elements. Fiddle

The quickest and some what dirty solution, is to put the next open tag next to the closing tag:

<video>....</video><video>
....</video><video>
....</video>

Fiddle

There are other options depending on your layout. You could add a negative right margin to the video element. Thoug this is not always consitent accross browsers.

The next option is to make the video elements block and float them left.

 video 
 {
      display:block;
      float:left;
 }

Fiddle

You may need some further tweaking with this approach depending on your layout.

Upvotes: 1

Related Questions