YouTube Video Embed
We are aware of some issues regarding playback of YouTube sources in JW Player. These issues were caused by changes that YouTube has made to their API.
Due to the frequency in which YouTube is making changes on their end and the advancements that we have made to our hosting and streaming platform, we are no longer actively maintaining our YouTube integration. This means that it will still be included in the player for the time being, but your mileage may vary and it may work in some situations and not others.
JW Player uses the official iFrame player API from YouTube to play a video inside of JW Player. This means that HTML5 is the only supported method of Youtube playback in JW7.
Several YouTube features, like the preview image and quality selection, are supported as well. Note that since the video file is being hosted via Youtube, there are certain limitations. These limitations include:
- YouTube watermark cannot be removed
- Sideloaded or Youtube captions cannot be used
- YouTube advertisements inside of videos cannot be removed
- JW Player's advertising plugins cannot be used.
- Skins will not appear initially on mobile.
- YouTube playlists and/or RSS feeds are unsupported
- HTML5 is the only supported method of playback
- Mobile devices require user interactions to start video playback. This means that playlists do not work seamlessly on mobile.
YouTube videos are embedded by linking to their page via the file setup option, using one of the following schemes:
An example of a Youtube embed can be seen below:
Above, we have embedded a JW Player to show its functions and appearance. However, to embed a player on your own web page, please see the following steps:
Step 1: Configuring your JW Player Library
JW Player offers two options for configuring your player's library on your web page:
Option A: Add a library to your <head>
In order to embed media with JW Player, you first have to add the player library to the head of your HTML page(or elsewhere above the actual embed). Player libraries are found in your embedding wizard and will set player defaults according to what is specified in the Wizard. A player's library will appear similarly to:
Note: The above library can be reached via HTTPS by changing http to https in the URL
JW Player libraries are cloud-hosted by us, making them fast, reliable, secure, and always up-to-date with our latest releases. In addition, all configuration is performed with our easy-to-use graphical interface via our Dashboard.
Option B: Self-hosting
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="//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.
Step 2: Add the embed code to your <body>
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:
Step 3: Configuration
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 - Which youtube video we'll be loading with JW Player
- width - The width of the video player in pixels
- height - The height of the player, also in pixels. Setting this to 40 or lower will put the player into Audio Mode.
The iFrame embed generated by JW Player has the following options configured. Note that not all of these options are directly configurable through JW Player:
|src||(Youtube video source)|
|origin||(Embedded Web page)|
Now that you have configured a basic player embed, you can start looking into adding further customizations. See the Customization section for more information.
If you are still having problems getting things to work, see our troubleshooting guide for a walkthrough of common embedding issues.
Did you find this article helpful?
Please log in to rate this article.