References

Beginner-friendly references for web development, with live, editable examples.

The HTML crossorigin attribute

Attribute All modern browsers Updated
Quick answer

The HTML crossorigin attribute configures the CORS request used to fetch the resource. It is used on the <img>, <script>, <link>, <video> and <audio> elements.

Overview

The crossorigin attribute configures the CORS request used to fetch the resource. It applies to the <img>, <script>, <link>, <video> and <audio> elements.

It is required to read pixel data from cross-origin images on a canvas and to get detailed error info from cross-origin scripts. It also pairs with integrity for Subresource Integrity.

Syntax

<script src="https://cdn.example.com/lib.js" crossorigin="anonymous"></script>

Values

Value
anonymous (default when present) | use-credentials

Best practices

  • Provide controls so users can play, pause and seek.
  • Browsers only allow autoplay when the media is also muted.
  • Always add captions with a <track> for accessibility.
  • Offer multiple formats with nested <source> elements for broad support.

Frequently asked questions

What does the crossorigin attribute do?
Sets the CORS mode for fetching the resource.
Why won't my video autoplay?
Browsers block autoplay with sound. The media must be muted to autoplay.
How do I make media accessible?
Add captions via a <track>, and provide a transcript for audio-only content.
Which elements use the crossorigin attribute?
It is an element-specific attribute, used on the <video>, <audio>, <source> and <track> elements.
coords data (object)