# Bad value X for attribute “width” on element “embed”: Expected a digit but saw “%” instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-width-on-element-embed-expected-a-digit-but-saw-percentage-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines the `width` and `height` attributes on `<embed>` as accepting only valid non-negative integers. This means bare numbers like `600` or `800` that represent dimensions in CSS pixels. When you write `width="100%"`, the validator expects a digit character but encounters the `%` sign, which doesn't conform to the expected format.

This matters for several reasons. Browsers may interpret invalid attribute values inconsistently — some might ignore the percentage and fall back to a default size, while others might attempt to parse the number portion and discard the `%`. This leads to unpredictable rendering across different browsers and devices. Following the specification ensures your embedded content displays at predictable dimensions everywhere.

The same rule applies to the `height` attribute. Neither `width` nor `height` on `<embed>` supports units of any kind — no `px`, `%`, `em`, or other suffixes. Just a plain integer.

## How to Fix It

You have two main approaches:

1. **Use integer pixel values directly.** Replace `width="100%"` with a specific pixel value like `width="800"`. This is the simplest fix when you know the desired dimensions.

2. **Use CSS for responsive or percentage-based sizing.** Remove the `width` and `height` attributes (or set them to reasonable defaults) and apply CSS through a `class`, `style` attribute, or external stylesheet. This is the better approach when you need the embed to be fluid or responsive.

## Examples

### Invalid — percentage in the `width` attribute

This triggers the validator error because `100%` is not a valid non-negative integer:

```html
<embed src="file.pdf" type="application/pdf" width="100%" height="600">
```

### Fixed — using pixel values in attributes

Replace the percentage with a plain integer:

```html
<embed src="file.pdf" type="application/pdf" width="800" height="600">
```

### Fixed — using CSS for percentage-based sizing

Remove the dimension attributes and use CSS to control the size:

```html
<embed src="file.pdf" type="application/pdf" class="embed-fluid">
```

```css
.embed-fluid {
  width: 100%;
  height: 600px;
}
```

### Fixed — responsive embed with a wrapper container

For a fully responsive embed that maintains an aspect ratio, wrap it in a container and use CSS:

```html
<div class="embed-wrapper">
  <embed src="file.pdf" type="application/pdf">
</div>
```

```css
.embed-wrapper {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 4 / 3;
}

.embed-wrapper embed {
  width: 100%;
  height: 100%;
}
```

This approach gives you full control over sizing and responsiveness without relying on invalid HTML attributes. The `aspect-ratio` property ensures the container (and therefore the embed) maintains consistent proportions as it scales.