> For the complete documentation index, see [llms.txt](https://docs.fluidplayer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fluidplayer.com/integration/quick-setup.md).
# Quick setup
This page walks you through adding Fluid Player to your website. There are two ways to do it:
* **The CDN approach** - paste a `
```
That's it. Refresh your page - you should see the Fluid Player skin replace the browser's default video controls.
> ✅ **As of v3.0.0**, the CDN build includes the CSS automatically. You don't need a separate `` tag for stylesheets.
#### **Pinning to a specific version**
The URL above (`/v3/current/`) always serves the latest v3 release - recommended for most cases. If you'd rather lock to a specific version so it never changes underneath you, use:
```html
```
***
### **Option 2: Install via NPM**
Use this approach if you're building a JavaScript application with a bundler like Webpack, Vite, or Rollup.
#### **Install the package**
Run one of these in your project root (where `package.json` lives):
**Using npm:**
```bash
npm install fluid-player@^3.0.0
```
**Using yarn:**
```bash
yarn add fluid-player@^3.0.0
```
#### Import the JavaScript
Wherever you want to use Fluid Player in your code:
```javascript
import fluidPlayer from 'fluid-player';
```
#### Import the CSS
The NPM build does not bundle CSS — you need to import it separately. How you do that depends on your bundler. For a Webpack project using `~` as the `node_modules` import prefix:
```css
@import "~fluid-player/src/css/fluidplayer.css";
```
Refer to your bundler's documentation if you're using a different tool.
***
### Adding multiple quality options
If you have your video in different qualities (1080p, 720p, etc.), you can let viewers pick. Add multiple `` tags — Fluid Player will show a quality selector in the player controls.
```html
```
The `title` attribute is what shows up in the quality menu.
#### Marking a source as HD
To highlight high-definition options visually, add `data-fluid-hd` to the `` tag. The HD label uses your player's primary color by default.
```html
```
If you'd rather use a different color for the HD label, override it in your own CSS - the relevant class is `fp_hd_source`:
```css
.fp_hd_source { color: yellow !important; }
```
***
### Customizing the player
Fluid Player accepts a configuration object as a second argument. This is where you set up appearance, ad behavior, and almost everything else.
```html
```
For the full list of options, see the [**Configuration reference**](/configuration/layout.md).
***
### Reference: the initializer
```javascript
var player = fluidPlayer(target [, options]);
```
**`target`** *(required)* - tells Fluid Player which video to attach to. You can pass either:
* The `id` of your `