Embedding With JW Player

No matter the method, a JW Player embed will end up looking something like this— a video playing on a webpage:




A big part of JW Player's power lies in its flexibility. Depending on your needs, there are several different ways to put JW Player on a webpage.

The process of pairing a JW Player with a piece of content using code and placing that code into a webpage is called "embedding". The block of code itself is called an "embed".

For more programmatic ways of embedding, please visit our API Documentation on this topic.


In this article, we'll cover the different embedding options. Follow our step-by-step instructions for the embed style that suits you best or skip to the bottom of the article to watch our JW Academy videos on Basic & Advanced embedding.

a diagram showing hosting methods and which embedding methods they correspond to

Selecting an Embedding Method

Your embedding method will be determined by the place your Players and Video are hosted (i.e. what systems are responsible for delivery).

Possible options for both Player & Video hosting are:

  • Hosted by JW Player/JW Platform
  • Hosted elsewhere (externally)

For example, area 3 at right represents an embed method for someone self-hosting their JW Player, but serving video that is hosted on JW Platform.


Select an embedding method from the chart to view instructions:

JW Player (Cloud) + JW Platform

When using the JW Player Cloud Player with content hosted on JW Platform, you can embed via the single-line embed (easiest!) or via a more custom setup.

Single-Line Embed

This embedding method is great for individual publishers who might grab the single-line embed code from the dashboard, as well as for developers or enterprise customers, who may use our API to build it.

The single-line embed is the simplest way to use JW Player. It references content you have added to your JW Player account and players you have built or customized.

The embed code itself looks like this:

<script src="//content.jwplatform.com/players/MEDIAID-PLAYERID.js"> </script>

MEDIAID is replaced with your content's Media ID, and PLAYERID is replaced with the ID of the cloud player being referenced.

This simple embed code contains everything needed for your player and content to display.

Paste the code into the <body> of your page where you want the player to appear. (If you are editing a webpage with a WYSIWYG editor, be sure to switch to <source> view before pasting).

Because this embed references a JW Player Cloud-Hosted Player, the embedded player can be changed any time (from the dashboard or via the API), and those changes will be reflected live — no embed code editing required!


Custom Embed

It is also possible to use more customized embeds within this hosting setup. (For example: you might like to use our dynamically-updatable cloud players along with instance-specific overrides).

Add the Player Library URL (JavaScript) to Your Website's <head>

Get the Player Library URL from any player in your JW Player account— it is accessible via dashboard or API.

A Cloud Player Library URL contains all necessary JW Player library JavaScript, PLUS the configuration settings for a specific player from your JW Player account. Adding the Cloud Player Library URL to your site's <head> gives your entire website a JW Player to use with default settings that can be overriden within specific embeds.

The player library URL looks like this:


PLAYERID is replaced with the ID of the cloud player being referenced.

Place this URL inside a <script> tag in the <head> of your website. It will look like this:

<script src="//content.jwplatform.com/libraries/PLAYERID.js"> </script>

When embedding with a player's Library URL, changes made to that player via the dashboard or the API will propagate live without any code updates needed on your website.


Write Your Embed Code for the Page <body>

Once the Cloud Player Library is placed in your website's <head> code, you'll need an embed block in-place on the page where you'd like your player + content to appear.

Below is an example of the minimum required configuration options:

<div id="myElement"></div>
<script type="text/javaScript">
var playerInstance = jwplayer("myElement");
    file: "//content.jwplatform.com/videos/MEDIAID-TEMPLATEID.mp4"
    mediaid: "xxxxYYYY"

Here, "file" is required. You can find the content URL in the dashboard under Video > [video name] > Sources Tab, or via the API ("TEMPLATEID" is the ID of that file's specific transcoding template, or Source). The option "mediaid" is not required, but highly recommended if you plan to use JW Analytics for your content.

In this embed block in the <body> of your page, you can set overrides on any of the configuration settings that may or may not already be in the Cloud Player Library URL in the <head> of your site.




Video Tutorials

What we'll cover in here is called the single-line embed — it only requires one line of code! This code contains a player ID, a media ID, and javascript JW Player library reference.

JW Academy: Intro to Basic Embedding

Did you find this article helpful?

Please log in to rate this article.