HTML Guide

The height attribute on the <video> element must be a non-negative integer representing the height in CSS pixels. The value “auto” is not a valid value for this attribute. To resolve the issue, set the height attribute to a specific numeric value or adjust the height using CSS instead.

Example with a numeric height value:

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Alternatively, control the height using CSS:

<video width="640" controls style="height: auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In the CSS approach, “auto” can be used, but it should not be part of the HTML attributes.

The controlslist attribute on the <video> element is experimental, and not yet valid in the current HTML5 standard, so you should use it with caution as it may not be supported by all browsers.

The <table> element does not accept a height attribute. Use CSS instead.

The W3C HTML Validator issue you encountered indicates that the value of the height attribute for an <img> element is set to “100%”, which is not allowed in HTML. The height attribute must be a specific digit that represents the height in pixels (e.g., “150”), rather than a percentage or any other unit.

How to Fix the Issue

To resolve this issue, you need to specify a numeric value for the height attribute instead. If you want the image to occupy a certain percentage of the container, use CSS instead of the height attribute.

Example of Incorrect HTML

Here is an example that causes the validation issue:

<img src="image.jpg" height="100%" alt="Example Image">

Corrected HTML Using Pixel Values

To correct the issue, replace the percentage with a pixel value:

<img src="image.jpg" height="200" alt="Example Image">

Alternative: Using CSS for Responsive Design

If you want the image to scale responsively and occupy 100% of the width of its container, consider using CSS:

<style>
  .responsive-img {
      width: 100%;
      height: auto; /* Maintains aspect ratio */
  }
</style>

<img src="image.jpg" class="responsive-img" alt="Example Image">

Summary

• Do not use percentage values for the height attribute of <img> tags.
• Use pixel values for fixed dimensions.
• For responsive design, use CSS to set the dimensions instead.

The width and height attributes on <img> elements expect a digit to specify the dimension in pixels. It should not contain units, letters or percent signs.

You can achieve this using CSS instead, for example:

<!-- Invalid syntax, the height attribute expects only digits -->
<img src="photo.jpg" alt="cat" height="auto" />

<!-- Valid syntax using CSS -->
<img src="photo.jpg" alt="cat" style="height: auto"  />

The error message is indicating that the width attribute of the <video> element has an invalid value. According to the HTML specification, the width attribute expects a non-negative integer value, representing the pixel width of the video.

The value "auto" is not valid for the width attribute. Instead, specify a full number that indicates the pixel width of the video. If you want the video to be responsive without specifying a fixed width, you can use CSS to achieve that.

Here are two ways to resolve this:

1. Specify a valid pixel value for width:

   <video width="640" height="360" controls>
     <source src="video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>

2. Use CSS for a responsive video player:

   Instead of using the width attribute, use CSS to set the width of the video element. This allows the video to adjust its size according to the container or viewport.

   <style>
     .responsive-video {
       width: 100%;
       height: auto;
     }
   </style>
   
   <video class="responsive-video" controls>
     <source src="video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>

In the second example, the video will scale based on its containing element, maintaining its aspect ratio due to the height: auto; CSS rule. This approach offers more flexibility for responsive design.

The attributes width and height of <iframe> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.

The attributes width and height of <img> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.

The value used in the height attribute on element iframe is not a valid integer. Remove any leading or trailing spaces from the attribute value.

Here’s an example:

<iframe width="560" height="315" src="your-video-link" frameborder="0" allowfullscreen></iframe>

Spaces in the poster attribute value are not valid in URLs and must be percent-encoded as %20.

The poster attribute on the video element specifies an image to show until the user plays or seeks the video. Attribute values that represent URLs (such as in src, href, or poster) must use valid URI syntax, meaning spaces are not allowed. Spaces must be replaced with %20, or you can use a path that avoids spaces entirely.

Example — Incorrect:

<video controls poster="/img/video images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Example — Fixed with percent-encoding:

<video controls poster="/img/video%20images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Example — Fixed by removing spaces from the folder name:

<video controls poster="/img/video-images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Always encode any space in URLs as %20 or avoid spaces in file and folder names.