Playing YouTube Videos in Player V4 (Deprecated)

Note: Due to rapid changes that YouTube makes to its API and other functionality, maintaining this plugin at an acceptable quality level has not been achievable. Ooyala is therefore deprecating Player V4 playback of YouTube-hosted videos. If you have specific needs around YouTube videos with the Ooyala player, please contact Ooyala Tech Support.
The Ooyala Player Plugin for YouTube iFrame enables you to play YouTube-hosted videos using Player V4 and the Player V4 skin. This allows you to syndicate video content from YouTube into your web application. Integration involves adding an asset in Backlot that points to the video hosted on YouTube. In Backlot, the asset type is "youtube", so in our documentation, we refer to these as YouTube assets. You can customize video metadata (video title and description) in Backlot so that it appears during playback.

Supported Players

The Ooyala Player Plugin for YouTube iFrame is supported in the Ooyala HTML5 web player versions 4.9.8 through 4.10.6 (but not later).

Usage Considerations

  • The Ooyala Player Plugin for YouTube iFrame uses YouTube's IFrame player API, which supports HTML5 playback only.
  • The Ooyala Player Plugin for YouTube iFrame supports pre-recorded videos. Although live streams will work, the player experience does not reflect that the content is live.

Available Player V4 Controls

You can use the following Player controls with Player V4 and YouTube-hosted videos:
  • Play
  • Pause
  • Volume
  • Social Sharing
  • Discovery (if enabled in Backlot)
  • Bitrate controls
In addition, playback events associated with a YouTube asset (represented by an embed_code in Backlot) are tracked using any of the Player V4 analytics plugins that implement the Analytics Framework.

Requirements and Limitations

Because YouTube (not Ooyala) hosts the video content, playback in Player V4 is subject to the following requirements:
  • Playing YouTube content is supported for HTML5 only. There is no Flash support.
  • YouTube content cannot be played on iOS devices.
  • Due to YouTube licensing requirements:
    • You cannot remove the YouTube watermark branding.
    • You cannot remove YouTube video ads.
    • To use Player V4 ad plugins (see Ads in Player V4) with YouTube-hosted videos, you must have written permission from YouTube, per their Terms of Service. If you have this permission, contact Brightcove Technical Support for information on how to use Ooyala's Ad Manager Framework (AMF) with YouTube-hosted videos and Player V4.
  • YouTube playlists are not supported within Player V4.
  • YouTube preview images and thumbnails are not supported in Player V4.
  • YouTube closed captions are not supported in Player V4.

Integration Steps

Step 1: Add the YouTube Video in Backlot

Begin by adding the YouTube video to your Backlot account.
  • When you add a YouTube video to Backlot, you simply create an asset that points to the video hosted on YouTube (its YouTube URL contains its YouTube ID). The video is not actually ingested into your Backlot account.
  • There is a 1:1 correspondence between YouTube assets in Backlot and YouTube IDs. A YouTube ID is uniquely associated with one YouTube asset in Backlot. No two YouTube assets in your account can have the same YouTube ID.
For details, see:

Step 2: Associate the YouTube Video with the Player

Next, in Backlot, associate the embed code of the YouTube video with the Player. For details, see Managing YouTube Asset Details.

Step 3: Specify the Plugin on the Web Page

Add the Ooyala Player Plugin for YouTube iFrame In the <head> section, load the Ooyala Player Plugin for YouTube iFrame.
   <title>My Test Player V4 Web Page</title>
   <script src="url_where_hosted/core.min.js"></script>
   <script src="url_where_hosted/html5-skin.min.js"></script>
   <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
   <script src="url_where_hosted/video-plugin/youtube.min.js"></script>

Step 4: Embed the Player and YouTube Asset in an HTML iFrame

See Embedding Player V4 in an HTML iframe.