When using @nrk/nrkno-player you have two options for how you want to include it in your app. The easiest way to get started is to use the version hosted on our CDN via nrkno-static-assets. The other option is to install it as a dependency in your project - this options requires you to have access to the @nrk organization on npm.

1. Usage via CDN (`static.nrk.no`)

<!doctype html>
<html lang="nb-NO">
  <head>
    <link href="https://static.nrk.no/nrkno-player/2.7.1/nrkno-player.css" rel="stylesheet" />
    <script src="https://static.nrk.no/nrkno-player/2.7.1/nrkno-player-entry.js"></script>
  </head>
  <body>
    <nrkno-player
      class="-player aspect-ratio aspect-ratio--1x1"
      src="nrk:b3456b79-bca7-4a04-b5f7-6a92640370da"
      type="player"
    ></nrkno-player>
  </body>
</html>

ℹ️ Note

The player is published to static.nrk.no using nrkno-static-assets. You can choose between selecting a specific version like in the example above, or you can fetch dynamic versions using /latest/, or /major/n/ instead of the exact version. For example: https://static.nrk.no/nrkno-player/major/2/nrkno-player-entry.js. More info about this can be found in nrkno-static-assets's readme.

⚠️ Important

The version of the CDN is not 1:1 with the player version. These are out of sync. For example:

https://static.nrk.no/nrkno-player/2.7.1/nrkno-player-entry.js points to nrkno-player@3.1.14 (player-elements@2.3.60/player-core@5.0.0).

2. Use npm-package directly and register the player as a custom element before using

import { NrknoPlayerElement } from '@nrk/nrkno-player';

if (!customElements.get('nrkno-player')) {
  customElements.define('nrkno-player', NrknoPlayerElement);
}

// And then use <nrkno-player> in your markup.

ℹ️ Note

The custom element does not come bundled with CSS. So you have add the css from @nrk/nrkno-player/index.css to your stylesheet yourself.

ℹ️ Note

Please make sure your bundler supports dynamic imports. Without it, the player bundle will be very big!

Available attributes/options

@nrk/nrkno-player extends player-element, and as such supports all the same options (including basic styling). In addition to those, you may specify these additional options for @nrk/nrkno-player:

Attribute	Default	Required	Description
`intersectionThreshold`	`undefined`	No	A string of the format `[playIntersection, pauseIntersection]`. Allows you to control when the player will start playing/pausing based on how far it's scrolled into view. For example: `intersectionThreshold="[0.8,0.2]"` will make the player start playing when 80% is visible, and will pause the video when 20% or less of the player visible.
`disableAutopause`	`false`	No	If present, the player will not pause when scrolled out of view.
`lazyAutoplay`	`false`	No	If present the player will not attempt to autoplay until the player is scrolled into view. If you you `lazyAutoplay` the player will also automatically pause when scrolled out of view - ignoring the `disableAutopause` option.
`buffering`	default	No	Can be set to `conservative`. If set to `conservative` livestreams will stop buffering 5 seconds after pausing
`recommendedOrigin`	`undefined`	No	The endpoint used to fetch recommendations to be displayed when the player pauses. If omited, no recommendations will display on pause. https://www.nrk.no/video/api/v1/recommend/ can be used for default recommendations. If you want another set of recommendations you'll have to provide your own endpoint which delivers data in the same format of https://www.nrk.no/video/api/v1/recommend/:clipId
`shareOrigin`	https://www.nrk.no/video	No	The base URL used for "copy link" and "open in new tab" functionality
`.posterData`	`undefined`	No	Allows the user to override the title, subtitle and image used in the poster before the video starts. See below for details

Using custom posterdata

If you want you can change the image, title and subtitle used in the poster before the video starts by setting the .posterData-attribute to a JSON-serialized PosterData object.

interface PosterData {
  heading?: string;
  subheading?: string;
  src?: string;
  srcset?: string; // Must be set if src is set
}

For example:

<nrkno-player
  type="player"
  class="-player aspect-ratio aspect-ratio--1x1"
  src="nrk:b3456b79-bca7-4a04-b5f7-6a92640370da"
  .posterData='{"subheading":"En lureplakat", "heading": "Selv om bildet er av mat, så handler kanskje ikke videoen om det?", "src": "https://gfx.nrk.no/a1Qe-JP7G6AQIcFfXs3WZgV5XtJePm-WvrM1KlupBAQg", "srcset": "https://gfx.nrk.no/a1Qe-JP7G6AQIcFfXs3WZgz_kn4JcIAhXrM1KlupBAQg 250w, https://gfx.nrk.no/a1Qe-JP7G6AQIcFfXs3WZgOaTIIrRCL5_rM1KlupBAQg 500w, https://gfx.nrk.no/a1Qe-JP7G6AQIcFfXs3WZgV5XtJePm-WvrM1KlupBAQg 1500w"}'
></nrkno-player>

Snowplow

The nrkno-player uses the @nrk/nrkno-snowplow package to dynamically import Snowplow. This should prevent multiple versions of snowplow being loaded on nrk.no/ pages.

Webview

When the player is opened in a webview, snowplow will load a special Snowplow plugin that will cause snowplow events to be logged via the native app and not the webview itself. More info here

FAQs

What is @nrk/nrkno-player?

Is @nrk/nrkno-player popular?

Is @nrk/nrkno-player well maintained?

Package last updated on 30 May 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@nrk/nrkno-player

@nrk/nrkno-player

Getting started

1. Usage via CDN (static.nrk.no)

2. Use npm-package directly and register the player as a custom element before using

Available attributes/options

Using custom posterdata

Snowplow

Webview

Related posts

Feross on TBPN: Socket's Series C and the State of Software Supply Chain Security

OSV Withdraws 157 Malware Reports After Automated False Positives Hit npm and PyPI

1. Usage via CDN (`static.nrk.no`)