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:
Note: We highly recommend against using Flash (FLV) content. For more info about changes to Flash, see our blog post here.
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. Watch our JW Academy videos on Basic & Advanced embedding, or skip to the bottom of the article to get step-by-step instructions for the embed style that suits you best.
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
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 embed code itself looks like this:
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!
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).
The player library URL looks like this:
Place this URL inside a <script> tag in the <head> of your website. It will look like this:
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:
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). 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.
Did you find this article helpful?
Please log in to rate this article.