HTML Guide for embed

Bad value X” for attribute “height” on element “embed”: Expected a digit but saw “p” instead.

Remove the unit; height on embed expects a non-negative integer (pixels) or a valid CSS length only when set via CSS, not the HTML attribute.

Detailed explanation

The embed element supports the presentational attributes width and height as unsigned integers representing CSS pixels. In HTML, the height attribute must be a number without a unit, for example 650. Supplying 650px violates the attribute’s value syntax and triggers the validator error.

If you want to use units or other CSS lengths (e.g., px, em, %, vh), set them with CSS via the style attribute or a stylesheet using the height property, not the HTML attribute.

HTML examples

Example reproducing the issue

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Embed height invalid</title>
</head>
<body>
  <embed src="file.pdf" type="application/pdf" width="800" height="650px">
</body>
</html>

Corrected example (HTML attribute as integer)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Embed height fixed</title>
</head>
<body>
  <embed src="file.pdf" type="application/pdf" width="800" height="650">
</body>
</html>

Alternative corrected example (use CSS units)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Embed height via CSS</title>
  <style>
    .viewer { width: 800px; height: 650px; }
  </style>
</head>
<body>
  <embed class="viewer" src="file.pdf" type="application/pdf">
</body>
</html>

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

width
embed

embed does not allow percentage values for the width (or height) attribute; only non-negative integers in CSS pixels are valid.

Explanation

The embed element’s width and height content attributes accept only non-negative integers representing CSS pixels, per WHATWG HTML. A value like width="100%" is invalid.
To make an embedded resource responsive or percentage-based, set numeric pixel values in attributes (or omit them) and control sizing with CSS using the style attribute or external stylesheets.
Valid approaches:
- Use width="600" (pixels) directly on embed.
- Omit width/height and use CSS like style="width:100%; height:400px;".
- For fully responsive aspect ratios, wrap embed in a container and size via CSS.

HTML examples

Invalid example (reproduces the validator error)

<!doctype html>
<html lang="en">
  <head>
    <title>Invalid embed width</title>
  </head>
  <body>
    <embed src="file.pdf" type="application/pdf" width="100%" height="600"></embed>
  </body>
</html>

Fixed example (valid pixels in attributes, or CSS for percentage)

<!doctype html>
<html lang="en">
  <head>
    <title>Valid embed width</title>
    <style>
      .embed-fluid {
        width: 100%;
        height: 600px;
        max-width: 800px; /* optional */
      }
    </style>
  </head>
  <body>
<!-- Option A: pixel attributes -->

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

<!-- Option B: CSS controls percentage width -->

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