Basic Video Embed
This article goes over the standard JW Player embedding practices for video files. For more information on JW Player's video playback capabilities, see our video section in the Media Reference page. If you are interested in streaming technologies such as RTMP, DASH, or HLS, please see our Streaming section for more info.
JW Player Example
The above example uses MP4, since is the most supported format across desktops and mobile devices. For this reason, we strongly suggest to always use MP4 video rather than FLV.
FLV files are typically a larger size and require a Flash installation. This means that FLV files will not play on mobile devices.
Three Ways to Embed a JW Player
There are 3 different ways to embed a JW Player. The first option can be done using the dashboard only, the second option is a combination of dashboard and coding, and the third option is for developers. We’ll tell you more about each option below.
Option 1: The Publish Mode
- Open the publish mode by clicking on the Expand Publish Mode button
- Choose a default player or one that you have built. Note: The 480x270 Fixed Width Player is the most basic JW Player.
- Choose content from your library that you want to embed.
Option 2: The Cloud Player
You can place this code in the <head> of your site, which gives your organization a player to use as a default site-wide. It's likely most relevant if you are a developer, since you can add new player settings to any player that setup on your site. Using a cloud library requires two parts.
Part 1: Adding the JW Player Library to Your Page
- Navigate to the Players section.
- Click on the 480x270 Fixed Width Player.
- Expand the Player Library URL
- Copy the URL
- Paste the URL into the <head> of your site.
NOTE: The 480 x 270 Player is the most basic player library and contains the default settings previously available in the JW6 cloud hosted library.
Part 2: Creating Your Embed Code
With the player library set up, it's time to actually embed the video. You can insert this HTML in your page, at the exact location you want the video to appear:
In this above code, the <div> element is used as a container to load JW Player into, which must have a unique id attribute. The setup() block then refers to this ID. However, let's break down each of the configuration options to see what is being affected:
- file (Required) - Which video we'll be loading with JW Player
- image - The poster image to load
- width - The width of the video player in pixels
- height - The height of the player, also in pixels
- title - The title of the video
- description - A description of the video
- mediaid - A media identifier string. Required for our video analytics.
Even though the player library you put on the page was set to a width and height of 480 x 270, you were able to override that at the instance level to render it at 640 by 360.
The above configuration options are very basic, but there are many more available to customize JW Player to your liking.
Option 3: Self-Hosted Player
If you want to host your own player library, you can find both your license key and latest JW Player files in your dashboard's Advanced Account page. Once downloaded, you will need to host jwplayer.js on your own server. When configuring your web page, you will then need to point to your copy of jwplayer.js and also define your self-hosted license key. Here's a code example:
<script src="http://mywebsite.com/jwplayer/jwplayer.js"></script> <script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>
Note: JW Player 7 now requires a license key. Please make sure to include this on your page if you are self-hosting.
The same steps for embedding and creating a JW Player instance described above apply for self-hosting.
A note on iframes and fullscreen
If you are utilizing the player inside of an iframe, it is important to ensure that your iframe is configured with allowfullscreen. If this is not set, the player will be blocked from expanding to fullscreen.