Basic Video Embedding Options

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.

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

 

 

Note: The above embed example uses a video in MP4 format. We highly recommend avoiding using Flash (FLV) content, as FLV does not play on mobile devices or without a Flash installation.

 

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 Content are hosted (i.e. what systems are responsible for delivery).

Possible options for both Player & Content 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 content that is hosted on JW Platform.

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've added to your JW Player account and players you've 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).

PART 1:
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:

//content.jwplatform.com/libraries/PLAYERID.js

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.

 

PART 2:
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");
playerInstance.setup({
    file: "//content.jwplatform.com/videos/MEDIAID-TEMPLATEID.mp4"
});
</script>

Here, "file" is required. You can find the content URL in the dashboard under Content > Content Detail > Sources Tab, or via the API ("TEMPLATEID" is the ID of that file's specific transcoding template, or Source).

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.

 

 

Did you find this article helpful?

You have already rated this article.