j1-template 2024.3.15 → 2024.3.16

data/lib/starter_web/pages/public/manuals/integrations/videojs/youtube-api.adoc

@@ -0,0 +1,1638 @@
+---
+title:                                  YouTube IFrame API
+title_extention:                        Player Settings
+tagline:                                Player Settings
+
+date:                                   2020-11-04
+#last_modified:                         2023-01-01
+
+description: >
+                                        The Youtube Embedded Player API explains how to embed
+                                        a YouTube player in your application and also defines
+                                        the parameters that are available in the YouTube embedded
+                                        player
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, video, support,
+                                        youtube
+
+categories:                             [ Manuals ]
+tags:                                   [ Module, YouTube ]
+
+image:
+  path:                                 /assets/image/icons/videojs/videojs-poster.png
+  width:                                1920
+  height:                               1280
+
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/manuals/videojs/youtube_api/
+
+resources:                              [ clipboard, rouge ]
+resource_options:
+  - toccer:
+      collapseDepth:                    2
+  - attic:
+      slides:
+        - url:                          /assets/image/icons/videojs/videojs-poster.png
+          alt:                          VideoJS Poster
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+// https://developers.google.com/youtube/iframe_api_reference?hl=en
+// https://developers.google.com/youtube/player_parameters?hl=en
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+The YouTube Embedded Player API explains how to embed a *YouTube player* in
+your application and also defines the parameters that are available in the
+YouTube embedded player.
+
+mdi:clock-time-five-outline[24px, md-gray mt-4 mb-5 mr-2]
+*30-60 Minutes* to read
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-5"]
+== Overview
+
+By appending parameters to the IFrame URL, you can customize the
+playback experience in your application. For example, you can
+automatically play videos using the `autoplay` parameter or cause a
+video to play repeatedly using the `loop` parameter. You can also use
+the `enablejsapi` parameter to enable the player to be controlled via
+the link:https://developers.google.com/youtube/iframe_api_reference[IFrame Player API, {browser-window--new}].
+
+This page currently defines all parameters supported in any YouTube
+*embedded* player. Each parameter definition identifies the players that
+support the corresponding parameter.
+
+[NOTE]
+====
+Embedded players must have a viewport that is at least 200px by
+200px. If the player displays controls, it must be large enough to fully
+display the controls without shrinking the viewport below the minimum
+size. We recommend 16:9 players be at least 480 pixels wide and 270
+pixels tall.
+====
+
+
+[role="mt-5"]
+== Embed a Player
+
+Define an `<iframe>` tag in your application in which the `src` URL
+specifies the content that the player will load as well as any other
+player parameters you want to set. The `<iframe>` tag's `height` and
+`width` parameters specify the dimensions of the player.
+
+If you create the `<iframe>` element yourself (rather than using the
+IFrame Player API to create it), you can append player parameters
+directly to the end of the URL. The URL has the following format:
+
+....
+https://www.youtube.com/embed/<VIDEO_ID>
+....
+
+The `<iframe>` tag below would load a *640x360px* player that would play
+the  YouTube video *M7lc1UVf-VE*. Since the URL sets the `autoplay`
+parameter to `1`, the video would play automatically once the player has
+loaded.
+
+[source, html]
+----
+<iframe
+  id="ytplayer"
+  type="text/html"
+  width="640" height="360"
+  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
+  frameborder="0">
+</iframe>
+----
+
+Follow the
+link:https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player[IFrame Player API instructions, {browser-window--new}]
+to insert a video player in your web page or
+application after the Player API's Javascript code has loaded. The
+second parameter in the constructor for the video player is an object
+that specifies player options. Within that object, the `playerVars`
+property identifies player parameters.
+
+The HTML and Javascript code below shows a simple example that inserts a
+*YouTube player* into the page element that has an `id` value of
+`ytplayer`. The `onYouTubePlayerAPIReady()` method specified here is
+called automatically when the IFrame Player API code has loaded. This
+code does not define any player parameters and also does not define
+other event handlers.
+
+[source, html]
+----
+<div id="ytplayer"></div>
+
+<script>
+  // Load the IFrame Player API code asynchronously.
+  var tag = document.createElement('script');
+  tag.src = "https://www.youtube.com/player_api";
+  var firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  // Replace the 'ytplayer' element with an <iframe> and
+  // YouTube player after the API code downloads.
+  var player;
+  function onYouTubePlayerAPIReady() {
+    player = new YT.Player('ytplayer', {
+      height: '360',
+      width: '640',
+      videoId: 'M7lc1UVf-VE'
+    });
+  }
+</script>
+----
+
+
+[role="mt-5"]
+== Select content to play
+
+You can configure your embedded player to load a video, a playlist, or a
+user's uploaded videos.
+
+The following list explains these options for loading a video. For an IFrame
+embed, the YouTube video ID for the video that you want to load is specified
+in the IFrame's `src` URL.
+
+....
+https://www.youtube.com/embed/<VIDEO_ID>
+....
+
+If you are using the YouTube Data API (v3), you can programmatically construct
+these URLs by retrieving video IDs from
+link:https://developers.google.com/youtube/v3/docs/search#resource[search results, {browser-window--new}],
+link:https://developers.google.com/youtube/v3/docs/playlistItems#resource[playlist item resources, {browser-window--new}],
+link:https://developers.google.com/youtube/v3/docs/videos#resource[video resources, {browser-window--new}],
+or other resources. After obtaining a video ID, replace the `VIDEO_ID` text in
+the URLs above with that value to create the player URL.
+
+For loading a playlist, set the `listType` player parameter to `playlist`.
+In addition, set the `list` player parameter to the YouTube playlist ID that
+you want to load.
+
+....
+https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID
+....
+
+Note that you need to prepend the playlist ID with the letters `PL` as
+shown in the following example:
+
+....
+https://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6
+....
+
+If you are using the YouTube Data API (v3), you can programmatically
+construct these URLs by retrieving playlist IDs from
+link:https://developers.google.com/youtube/v3/docs/search#resource[search results, {browser-window--new}],
+link:https://developers.google.com/youtube/v3/docs/channels#contentDetails.relatedPlaylists[channel resources, {browser-window--new}],
+or link:https://developers.google.com/youtube/v3/docs/activities#resource[activity resources, {browser-window--new}].
+After obtaining a playlist ID, replace the `PLAYLIST_ID` text in the URL above
+with that value.
+
+For Loading a user's uploaded videos, set the `listType` player parameter
+to `user_uploads`. In addition, set the `list` player parameter to the
+YouTube username whose uploaded videos you want to load.
+
+....
+https://www.youtube.com/embed?listType=user_uploads&list=USERNAME
+....
+
+[role="mt-5"]
+== Supported players parameters
+
+All of the following parameters are optional.
+
+[role="mt-4"]
+=== `autoplay`
+
+This parameter specifies whether the initial video will automatically
+start to play when the player loads. Supported values are `0` or `1`.
+The default value is `0`.
+
+If you enable Autoplay, playback will occur without any user interaction
+with the player; playback data collection and sharing will therefore
+occur upon page load.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`0`
+
+|===
+
+[role="mt-4"]
+=== `cc_lang_pref`
+
+This parameter specifies the default language that the player will use
+to display captions. Set the parameter's value to an
+link:https://www.loc.gov/standards/iso639-2/php/code_list.php[ISO 639-1 two-letter language code, {browser-window--new}].
+
+If you use this parameter and also set the `cc_load_policy` parameter to
+`1`, then the player will show captions in the specified language when
+the player loads. If you do not also set the `cc_load_policy` parameter,
+then captions will not display by default, but will display in the
+specified language if the user opts to turn captions on.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`string`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `cc_load_policy`
+
+Setting the parameter's value to `1` causes closed captions to be shown
+by default, even if the user has turned captions off. The default
+behavior is based on user preference.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `color`
+
+This parameter specifies the color that will be used in the player's
+video progress bar to highlight the amount of the video that the viewer
+has already seen. Valid parameter values are `red` and `white`, and, by
+default, the player uses the color red in the video progress bar.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`red`\|`white`
+|`red`
+
+|===
+
+[role="mt-4"]
+=== `controls`
+
+This parameter indicates whether the video player controls are
+displayed:
+
+* `controls=0`, Player controls do not display in the player.
+* `controls=1`, Player controls display in the player (default).
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`1`
+
+|===
+
+[role="mt-4"]
+=== `disablekb`
+
+Setting the parameter's value to `1` causes the player to not respond to
+keyboard controls. The default value is `0`, which means that keyboard
+controls are enabled. Currently supported keyboard controls are:
+
+* Spacebar or [k]: Play / Pause
+* Arrow Left: Jump back 5 seconds in the current video
+* Arrow Right: Jump ahead 5 seconds in the current video
+* Arrow Up: Volume up
+* Arrow Down: Volume Down
+* [f]: Toggle full-screen display
+* [j]: Jump back 10 seconds in the current video
+* [l]: Jump ahead 10 seconds in the current video
+* [m]: Mute or unmute the video
+* [0-9]: Jump to a point in the video. `0` jumps to the beginning of the
+  video, `1` jumps to the point 10% into the video, `2` jumps to the point
+  20% into the video, and so forth.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`0`
+
+|===
+
+[role="mt-4"]
+=== `enablejsapi`
+
+Setting the parameter's value to `1` enables the player to be controlled
+via IFrame Player API calls. The default value is `0`, which means that the
+player cannot be controlled using that API.
+
+For more information on the IFrame API and how to use it, see the
+link:https://developers.google.com/youtube/iframe_api_reference[IFrame API documentation, {browser-window--new}].
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`0`
+
+|===
+
+[role="mt-4"]
+=== `end`
+
+This parameter specifies the time, measured in seconds from the start of
+the video, when the player should stop playing the video. The parameter
+value is a positive integer.
+
+Note that the time is measured from the beginning of the video and not
+from either the value of the `start` player parameter or the
+`startSeconds` parameter, which is used in YouTube Player API methods
+for loading or queueing a video.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`integer`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `fs`
+
+Setting this parameter to `0` prevents the fullscreen button from
+displaying in the player. The default value is `1`, which causes the
+fullscreen button to display.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`1`
+
+|===
+
+[role="mt-4"]
+=== `hl`
+
+Sets the player's interface language. The parameter value is an
+link:https://www.loc.gov/standards/iso639-2/php/code_list.php[ISO 639-1 two-letter language code, {browser-window--new}]
+or a fully specified locale. For example, `fr` and `fr-ca` are both valid
+values. Other language input codes, such as IETF language tags (BCP 47) might
+also be handled properly.
+
+The interface language is used for tooltips in the player and also
+affects the default caption track. Note that _YouTube_ might select a
+different caption track language for a particular user based on the
+user's individual language preferences and the availability of caption
+tracks.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`string`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `iv_load_policy`
+
+Setting the parameter's value to `1` causes video annotations to be
+shown by default, whereas setting to `3` causes video annotations to not
+be shown by default. The default value is `1`.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`1`\|`3`
+|`1`
+
+|===
+
+[role="mt-4"]
+=== `list`
+
+The `list` parameter, in conjunction with the `listType` parameter,
+identifies the content that will load in the player.
+
+* If the `listType` parameter value is `user_uploads`, then the `list`
+parameter value identifies the _YouTube_ channel whose uploaded videos
+will be loaded.
+* If the `listType` parameter value is `playlist`, then the `list`
+parameter value specifies a YouTube playlist ID. In the parameter value,
+you need to prepend the playlist ID with the letters `PL` as shown in
+the example below.
+
+....
+https://www.youtube.com/embed?listType=playlist &list=PLC77007E23FF423C6
+....
+
+* If the `listType` parameter value is `search`, then the `list`
+  parameter value specifies the search query.
+
+[NOTE]
+====
+This functionality is
+link:https://developers.google.com/youtube/player_parameters#release_notes_10_13_2020[deprecated, {browser-window--new}]
+and will no longer be supported as of 15 November 2020.
+
+If you specify values for the `list` and `listType` parameters,
+the IFrame embed URL does not need to specify a video ID.
+====
+
+[role="mt-4"]
+=== `listType`
+
+The `listType` parameter, in conjunction with the `list` parameter,
+identifies the content that will load in the player. Valid parameter
+values are `playlist` and `user_uploads`.
+
+If you specify values for the `list` and `listType` parameters, the
+IFrame embed URL does not need to specify a video ID.
+
+[NOTE]
+====
+A third value, `search`, has been
+link:https://developers.google.com/youtube/player_parameters#release_notes_10_13_2020[deprecated, {browser-window--new}]
+and will no longer be supported as of 15 November 2020.
+====
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`user_uploads`\|`playlist`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `loop`
+
+In the case of a single video player, a setting of `1` causes the player
+to play the initial video again and again. In the case of a playlist
+player (or custom player), the player plays the entire playlist and then
+starts again at the first video.
+
+Supported values are `0` and `1`, and the default value is `0`.
+
+[NOTE]
+====
+This parameter has limited support in IFrame embeds. To loop a
+single video, set the `loop` parameter value to `1` and set the
+`playlist` parameter value to the same video ID already specified in the
+Player API URL:
+====
+
+[source, notranslate]
+----
+https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1
+----
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`0`
+
+|===
+
+[role="mt-4"]
+=== `modestbranding`
+
+[WARNING]
+====
+*This parameter is deprecated* and has no effect. See the
+link:https://developers.google.com/youtube/player_parameters#release_notes_08_15_2023[deprecation announcement, {browser-window--new}]
+for more information.
+====
+
+[role="mt-4"]
+=== `origin`
+
+This parameter provides an extra security measure for the IFrame API and
+is only supported for IFrame embeds. If you are using the IFrame API,
+which means you are setting the `enablejsapi` parameter value to `1`,
+you should always specify your domain as the `origin` parameter value.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`string`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `playlist`
+
+This parameter specifies a comma-separated list of video IDs to play. If
+you specify a value, the first video that plays will be the `VIDEO_ID`
+specified in the URL path, and the videos specified in the `playlist`
+parameter will play thereafter.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`array`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `playsinline`
+
+This parameter controls whether videos play inline or fullscreen on iOS.
+Valid values are:
+
+* `0`, Results in fullscreen playback. This is currently the default
+  value, though the default is subject to change.
+* `1`, Results in inline playback for mobile browsers and for `WebViews`
+  created with the `allowsInlineMediaPlayback` property set to `YES`.
+
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`0`
+
+|===
+
+[role="mt-4"]
+=== `rel`
+
+Prior to the change, this parameter indicates whether the player should
+show related videos when playback of the initial video ends.
+
+* If the parameter's value is set to `1`, which is the default value,
+  then the player does show related videos.
+* If the parameter's value is set to `0`, then the player does not show
+  related videos.
+
+After the change, you will not be able to disable related videos.
+Instead, if the `rel` parameter is set to `0`, related videos will come
+from the same channel as the video that was just played.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`0`\|`1`
+|`1`
+
+|===
+
+[role="mt-4"]
+=== `start`
+
+This parameter causes the player to begin playing the video at the given
+number of seconds from the start of the video. The parameter value is a
+positive integer. Note that similar to the `seekTo` method, the player
+will look for the closest keyframe to the time you specify. This means
+that sometimes the play head may seek to just before the requested time,
+usually no more than around two seconds.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`integer`
+|no defaults
+
+|===
+
+[role="mt-4"]
+=== `widget_referrer`
+
+This parameter identifies the URL where the player is embedded. This
+value is used in YouTube Analytics reporting when the YouTube player is
+embedded in a widget, and that widget is then embedded in a web page or
+application. In that scenario, the `origin` parameter identifies the
+widget provider's domain, but YouTube Analytics should not identify the
+widget provider as the actual traffic source. Instead, YouTube Analytics
+uses the `widget_referrer` parameter value to identify the domain
+associated with the traffic source.
+
+[cols="3a,9a", width="100%", options="header", role="rtable mt-5 mb-5"]
+|===
+|Type |Default
+
+|`string`
+|no defaults
+
+|===
+
+
+[role="mt-5"]
+== Methods
+
+lorem:sentences[5]
+
+[role="mt-4"]
+=== player.playVideo
+
+Plays the currently cued/loaded video. The final player state after
+this method executes will be `playing` (1). +
+
+[NOTE]
+====
+A playback only counts toward a video's official view count if
+it is initiated via a native play button in the player.
+====
+
+[role="mt-4"]
+=== player.pauseVideo
+
+Pauses the currently playing video. The final player state after this
+method executes will be `paused` (`2`) unless the player is in
+the `ended` (`0`) state when the method is called, in which case
+the player state will not change.
+
+[role="mt-4"]
+=== player.stopVideo
+
+Stops and cancels loading of the current video. This method should
+be reserved for rare situations when you know that the user will not
+be watching additional video in the player. If your intent is to pause
+the video, you should just call the link:#pauseVideo[`pauseVideo`]
+method. If you want to change the video that the player is playing,
+you can call one of the queueing methods without calling
+`+stopVideo+` first.
+
+[WARNING]
+====
+Unlike the link:#pauseVideo[`pauseVideo`] method,
+which leaves the player in the `+paused+` (`2`) state, the
+`stopVideo` method could put the player into any not-playing
+state, including `ended` (`0`), `paused` (`2`), `video cued`
+(`5`) or `not started` (`-1`).
+====
+
+[role="mt-4"]
+=== player.seekTo(seconds:Number, allowSeekAhead:Boolean)
+
+Seeks to a specified time in the video. If the player is paused when
+the method is called, it will remain paused. If the method is
+called from another state (`+playing+`, `+video cued+`, etc.), the
+player will play the video.
+
+* The `seconds` parameter identifies the time to which the player
+should advance.
+
+The player will advance to the closest keyframe before that time
+unless the player has already downloaded the portion of the video to
+which the user is seeking.
+* The `allowSeekAhead` parameter determines whether the player will
+make a new request to the server if the `seconds` parameter
+specifies a time outside of the currently buffered video data.
+
+It is recommendend that you set this parameter to `false` while the user
+drags the mouse along a video progress bar and then set it to `true`
+when the user releases the mouse. This approach lets a user scroll to
+different points of a video without requesting new video streams by
+scrolling past unbuffered points in the video. When the user releases
+the mouse button, the player advances to the desired point in the
+video and requests a new video stream if necessary.
+
+////
+[[Spherical_Video_Controls]]
+=== Controlling playback of 360° videos
+
+*Note:* The 360° video playback experience has limited support on mobile
+devices. On unsupported devices, 360° videos appear distorted and there
+is no supported way to change the viewing perspective at all, including
+through the API, using orientation sensors, or responding to touch/drag
+actions on the device's screen.
+
+`+player.+``+getSphericalProperties+``+():Object+`::
+  Retrieves properties that describe the viewer's current perspective,
+  or view, for a video playback. In addition:
+  +
+  * This object is only populated for 360° videos, which are also called
+  spherical videos.
+  * If the current video is not a 360° video or if the function is
+  called from a non-supported device, then the function returns an empty
+  object.
+  * On supported mobile devices, if the
+  link:#enableOrientationSensor[`+enableOrientationSensor+`] property is
+  set to `true`, then this function returns an object in which the
+  `+fov+` property contains the correct value and the other properties
+  are set to `+0+`.
+  +
+  The object contains the following properties:
+  +
+  [width="100%",cols="50%,50%",options="header",]
+  |===
+  |Properties |
+  |`+yaw+` |A number in the range [0, 360) that represents the
+  horizontal angle of the view in degrees, which reflects the extent to
+  which the user turns the view to face further left or right. The
+  neutral position, facing the center of the video in its
+  equirectangular projection, represents 0°, and this value increases as
+  the viewer turns left.
+
+  |`+pitch+` |A number in the range [-90, 90] that represents the
+  vertical angle of the view in degrees, which reflects the extent to
+  which the user adjusts the view to look up or down. The neutral
+  position, facing the center of the video in its equirectangular
+  projection, represents 0°, and this value increases as the viewer
+  looks up.
+
+  |`+roll+` a|
+  A number in the range [-180, 180] that represents the clockwise or
+  counterclockwise rotational angle of the view in degrees. The neutral
+  position, with the horizontal axis in the equirectangular projection
+  being parallel to the horizontal axis of the view, represents 0°. The
+  value increases as the view rotates clockwise and decreases as the
+  view rotates counterclockwise. +
+   +
+  Note that the embedded player does not present a user interface for
+  adjusting the roll of the view. The roll can be adjusted in either of
+  these mutually exclusive ways:
+
+  . Use the orientation sensor in a mobile browser to provide roll for
+  the view. If the link:#enableOrientationSensor[orientation sensor] is
+  enabled, then the `+getSphericalProperties+` function always returns
+  `+0+` as the value of the `+roll+` property.
+  . If the orientation sensor is disabled, set the roll to a nonzero
+  value using this API.
+
+  |`+fov+` |A number in the range [30, 120] that represents the
+  field-of-view of the view in degrees as measured along the longer edge
+  of the viewport. The shorter edge is automatically adjusted to be
+  proportional to the aspect ratio of the view. +
+   +
+  The default value is 100 degrees. Decreasing the value is like zooming
+  in on the video content, and increasing the value is like zooming out.
+  This value can be adjusted either by using the API or by using the
+  mousewheel when the video is in fullscreen mode.
+  |===
+
+`+player.+``+setSphericalProperties+``+(properties:Object):Void+`::
+  Sets the video orientation for playback of a 360° video. (If the
+  current video is not spherical, the method is a no-op regardless of
+  the input.) +
+   +
+  The player view responds to calls to this method by updating to
+  reflect the values of any known properties in the `+properties+`
+  object. The view persists values for any other known properties not
+  included in that object. +
+   +
+  In addition:
+  +
+  * If the object contains unknown and/or unexpected properties, the
+  player ignores them.
+  * As noted at the beginning of this section, the 360° video playback
+  experience is not supported on all mobile devices.
+  * By default, on supported mobile devices, this function sets only
+  sets the `+fov+` property and does not affect the `+yaw+`, `+pitch+`,
+  and `+roll+` properties for 360° video playbacks. See the
+  `+enableOrientationSensor+` property below for more detail.
+  +
+  The `+properties+` object passed to the function contains the
+  following properties:
+  +
+  [width="100%",cols="50%,50%",options="header",]
+  |===
+  |Properties |
+  |`+yaw+` |See link:#spherical-property-yaw[definition] above.
+
+  |`+pitch+` |See link:#spherical-property-pitch[definition] above.
+
+  |`+roll+` |See link:#spherical-property-roll[definition] above.
+
+  |`+fov+` |See link:#spherical-property-fov[definition] above.
+
+  |`+enableOrientationSensor+` a|
+  [.note]##*Note:* This property affects the 360° viewing experience on
+  supported devices only.##A boolean value that indicates whether the
+  IFrame embed should respond to events that signal changes in a
+  supported device's orientation, such as a mobile browser's
+  `+DeviceOrientationEvent+`. The default parameter value is `true`. +
+   +
+  *Supported mobile devices*
+
+  * When the value is `true`, an embedded player relies _only_ on the
+  device's movement to adjust the `+yaw+`, `+pitch+`, and `+roll+`
+  properties for 360° video playbacks. However, the `+fov+` property can
+  still be changed via the API, and the API is, in fact, the only way to
+  change the `+fov+` property on a mobile device. This is the default
+  behavior.
+  * When the value is `false`, then the device's movement does not
+  affect the 360° viewing experience, and the `+yaw+`, `+pitch+`,
+  `+roll+`, and `+fov+` properties must all be set via the API.
+
+   +
+  *Unsupported mobile devices* +
+  The `+enableOrientationSensor+` property value does not have any
+  effect on the playback experience.
+
+  |===
+
+== Playing a video in a playlist
+
+`+player.+``+nextVideo+``+():Void+`::
+  This function loads and plays the next video in the playlist.
+  +
+  * If `+player.nextVideo()+` is called while the last video in the
+  playlist is being watched, and the playlist is set to play
+  continuously (link:#setLoop[`+loop+`]), then the player will load and
+  play the first video in the list.
+  * If `+player.nextVideo()+` is called while the last video in the
+  playlist is being watched, and the playlist is not set to play
+  continuously, then playback will end.
+
+`+player.+``+previousVideo+``+():Void+`::
+  This function loads and plays the previous video in the playlist.
+  +
+  * If `+player.previousVideo()+` is called while the first video in the
+  playlist is being watched, and the playlist is set to play
+  continuously (link:#setLoop[`+loop+`]), then the player will load and
+  play the last video in the list.
+  * If `+player.previousVideo()+` is called while the first video in the
+  playlist is being watched, and the playlist is not set to play
+  continuously, then the player will restart the first playlist video
+  from the beginning.
+
+`+player.+``+playVideoAt+``+(index:Number):Void+`::
+  This function loads and plays the specified video in the playlist.
+  +
+  * The required `+index+` parameter specifies the index of the video
+  that you want to play in the playlist. The parameter uses a zero-based
+  index, so a value of `+0+` identifies the first video in the list. If
+  you have link:#setShuffle[shuffled] the playlist, this function will
+  play the video at the specified position in the shuffled playlist.
+////
+
+[role="mt-4"]
+=== Changing the player volume
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.mute()
+
+Mutes the player.
+
+[role="mt-4"]
+==== player.unMute()
+
+Unmutes the player.
+
+[role="mt-4"]
+==== player.isMuted()
+
+Returns `true` if the player is muted, `false` if not.
+
+[role="mt-4"]
+==== player.setVolume(volume:Number)
+
+Sets the volume. Accepts an integer between `0` and `100`.
+
+[role="mt-4"]
+==== player.getVolume(volume:Number)
+
+Returns the player's current volume, an integer between `0` and `100`.
+
+[NOTE]
+====
+The method `getVolume()` will return the volume even if the player
+is muted.
+====
+
+[role="mt-4"]
+=== Setting the player size
+
+lorem:sentences[5]
+
+==== player.setSize(width:Number, height:Number)
+
+Sets the size in pixels of the `<iframe>` that contains the player.
+
+
+=== Setting the playback rate
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.getPlaybackRate()
+
+This method retrieves the playback rate of the currently playing
+video. The default playback rate is `1`, which indicates that the
+video is playing at normal speed. Playback rates may include values
+like `0.25`, `0.5`, `1`, `1.5`, and `2`.
+
+[role="mt-4"]
+==== player.setPlaybackRate+(suggestedRate:Number)
+
+This method sets the suggested playback rate for the current video.
+If the playback rate changes, it will only change for the video that
+is already cued or being played. If you set the playback rate for a
+cued video, that rate will still be in effect when the `playVideo`
+method is called or the user initiates playback directly through the
+player controls. In addition, calling methods to cue or load videos
+or playlists (`cueVideoById`, `loadVideoById`, etc.) will reset
+the playback rate to `1`.
+
+Calling this method does *not guarantee* that the playback rate will
+actually change. However, if the playback rate does change, the
+link:#onPlaybackRateChange[`onPlaybackRateChange`] event will fire,
+and your code should respond to the event rather than the fact that it
+called the `setPlaybackRate` method.
+
+The link:#getAvailablePlaybackRates[`getAvailablePlaybackRates`]
+method will return the possible playback rates for the currently
+playing video. However, if you set the `suggestedRate` parameter to
+a non-supported integer or float value, the player will round that
+value down to the nearest supported value in the direction of `1`.
+
+[role="mt-4"]
+==== player.getAvailablePlaybackRates()
+
+This method returns the set of playback rates (as an array) in which
+the current video is available. The default value is `1`, which indicates
+that the video is playing at normal speed.
+
+The method returns an array of numbers ordered from slowest to
+fastest playback speed. Even if the player does not support variable
+playback speeds, the array should always contain at least one value
+(`1`).
+
+[role="mt-4"]
+=== Setting playback behavior for playlists
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.setLoop+(loopPlaylists:Boolean)
+
+This method indicates whether the video player should continuously
+play a playlist or if it should stop playing after the last video in
+the playlist ends. The default behavior is that playlists do not loop.
+
+This setting will persist even if you load or cue a different playlist,
+which means that if you load a playlist, call the `setLoop` method with
+a value of `true`, and then load a second playlist, the second playlist
+will also loop.
+
+The required `loopPlaylists` parameter identifies the looping *behavior*.
+
+* If the parameter value is `true`, then the video player will
+  continuously play playlists. After playing the last video in a
+  playlist, the video player will go back to the beginning of the
+  playlist and play it again.
+* If the parameter value is `false`, then playbacks will end after
+  the video player plays the last video in a playlist.
+
+[role="mt-4"]
+==== player.setShuffle(shufflePlaylist:Boolean)
+
+This method indicates whether a playlist's videos should be shuffled
+so that they play back in an order different from the one that the
+playlist creator designated. If you shuffle a playlist after it has
+already started playing, the list will be reordered while the video
+that is playing continues to play. The next video that plays will then
+be selected based on the reordered list.
+
+This setting will not persist if you load or cue a different playlist,
+which means that if you load a playlist, call the `setShuffle`
+method, and then load a second playlist, the second playlist will
+not be shuffled.
+
+The required `shufflePlaylist` parameter indicates whether YouTube
+should shuffle the playlist.
+
+* If the parameter value is `true`, then YouTube will shuffle the
+  playlist order. If you instruct the method to shuffle a playlist
+  that has already been shuffled, YouTube will shuffle the order again.
+* If the parameter value is `false`, then YouTube will change the
+  playlist order back to its original order.
+
+[role="mt-4"]
+=== Playback status
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.getVideoLoadedFraction
+
+Returns a (float) number between `0` and `1` that specifies the *percentage*
+of the video that the player shows as buffered. This method returns a
+more reliable number than the now-deprecated
+link:#getVideoBytesLoaded[`getVideoBytesLoaded`] and
+link:#getVideoBytesTotal[`getVideoBytesTotal`] methods.
+
+[role="mt-4"]
+==== player.etPlayerState()
+
+Returns the state of the player. Possible values are:
+
+* `-1`, not started
+* `0`, ended
+* `1`, playing
+* `2`, paused
+* `3`, buffering
+* `5`, video cued
+
+[role="mt-4"]
+==== player.getCurrentTime()
+
+Returns the elapsed time in seconds since the video started playing.
+
+[role="mt-4"]
+==== player.getVideoStartBytes()
+
+*Deprecated as of October 31, 2012*. Returns the number of bytes the
+video file started loading from. (This method now always returns a
+value of `0`.) Example scenario: the user seeks ahead to a point
+that hasn't loaded yet, and the player makes a new request to play a
+segment of the video that hasn't loaded yet.
+
+[role="mt-4"]
+==== player.getVideoBytesLoaded()
+
+*Deprecated as of July 18, 2012*. Instead, use the
+link:#getVideoLoadedFraction[`getVideoLoadedFraction`] method to
+determine the percentage of the video that has buffered.
+
+This method returns a value between `0` and `1000` that
+approximates the amount of the video that has been loaded. You could
+calculate the fraction of the video that has been loaded by dividing
+the `getVideoBytesLoaded` value by the `getVideoBytesTotal` value.
+
+[role="mt-4"]
+==== player.getVideoBytesTotal()
+
+*Deprecated as of July 18, 2012*. Instead, use the
+link:#getVideoLoadedFraction[`getVideoLoadedFraction`] method to
+determine the percentage of the video that has buffered.
+
+Returns the size in bytes of the currently loaded/playing video or an
+approximation of the video's size.
+
+This method always returns a value of `1000`. You could calculate
+the fraction of the video that has been loaded by dividing the
+`getVideoBytesLoaded` value by the `getVideoBytesTotal` value.
+
+[role="mt-4"]
+=== Retrieving video information
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.getDuration()
+
+Returns the duration in seconds of the currently playing video. Note
+that `getDuration()` method will return `0` until the video's metadata is
+loaded, which normally happens just after the video starts playing.
+
+If the currently playing video is a
+link:/youtube/2.0/developers_guide_protocol_retrieving_live_events[live
+event], the `getDuration()` method will return the elapsed time
+since the live video stream began. Specifically, this is the amount of
+time that the video has streamed without being reset or interrupted.
+In addition, this duration is commonly longer than the actual event
+time since streaming may begin before the event's start time.
+
+[role="mt-4"]
+==== player.getVideoUrl()
+
+Returns the YouTube.com URL for the currently loaded/playing video.
+
+[role="mt-4"]
+==== player.getVideoEmbedCode()
+
+Returns the embed code for the currently loaded/playing video.
+
+[role="mt-4"]
+=== Retrieving playlist information
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.getPlaylist()
+
+This method returns an array of the video IDs in the playlist as
+they are currently ordered. By default, this method will return
+video IDs in the order designated by the playlist owner. However, if
+you have called the link:#setShuffle[`setShuffle`] method to
+shuffle the playlist order, then the `getPlaylist()` method's
+return value will reflect the shuffled order.
+
+[role="mt-4"]
+==== player.getPlaylistIndex()
+
+This method returns the index of the playlist video that is
+currently playing.
+
+* If you have not shuffled the playlist, the return value will
+  identify the position where the playlist creator placed the video.
+  The return value uses a zero-based index, so a value of `0` identifies
+  the first video in the playlist.
+* If you have shuffled the playlist, the return value will identify
+  the video's order within the shuffled playlist.
+
+[role="mt-4"]
+=== Adding or removing an event listener
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.addEventListener(event:String, listener:String)
+
+Adds a listener method for the specified `event`. The
+link:#Events[Events] section below identifies the different events
+that the player might fire. The listener is a string that specifies
+the method that will execute when the specified event fires.
+
+[role="mt-4"]
+==== player.removeEventListener+(event:String, listener:String)
+
+Removes a listener method for the specified `event`. The `listener`
+is a string that identifies the method that will no longer execute
+when the specified event fires.
+
+[role="mt-4"]
+=== Accessing and modifying DOM nodes
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== player.getIframe()
+
+This method returns the DOM node for the embedded `<iframe>`.
+
+[role="mt-4"]
+==== player.destroy()
+
+Removes the `<iframe>` containing the player.
+
+
+[role="mt-5"]
+== Events
+
+The API fires events to notify your application of changes to the
+embedded player. As noted in the previous section, you can subscribe to
+events by adding an event listener when
+link:#Loading_a_Video_Player[constructing the `+YT.Player+` object], and
+you can also use the link:#addEventListener[`+addEventListener+`]
+method.
+
+The API will pass an event object as the sole argument to each of those
+methods. The event object has the following properties:
+
+* The event's `target` identifies the video player that corresponds to
+the event.
+* The event's `data` specifies a value relevant to the event. Note
+that the `onReady` and `+onAutoplayBlocked+` events do not specify a
+`data` property.
+
+[role="mt-4"]
+=== onReady
+
+This event fires whenever a player has finished loading and is ready
+to begin receiving API calls. Your application should implement this
+method if you want to automatically execute certain operations, such
+as playing the video or displaying information about the video, as
+soon as the player is ready.
+
+The example below shows a sample method for handling this event. The
+event object that the API passes to the method has a `target`
+property, which identifies the player. The method retrieves the
+embed code for the currently loaded video, starts to play the video,
+and displays the embed code in the page element that has an `+id+`
+value of `embed-code`.
+ 
+[source, js]
+----
+function onPlayerReady(event) {
+  var embedCode = event.target.getVideoEmbedCode();
+  event.target.playVideo();
+  if (document.getElementById('embed-code')) {
+    document.getElementById('embed-code').innerHTML = embedCode;
+  }
+}
+----
+
+[role="mt-4"]
+=== onStateChange
+
+This event fires whenever the player's state changes. The `data`
+property of the event object that the API passes to your event
+listener method will specify an integer that corresponds to the new
+player state. Possible values are:
+
+* `-1`, not started
+* `0`, ended
+* `1`, playing
+* `2`, paused
+* `3`, buffering
+* `5`, video cued
+
+When the player first loads a video, it will broadcast an
+`+unstarted+` (`+-1+`) event. When a video is cued and ready to play,
+the player will broadcast a `+video cued+` (`+5+`) event. In your
+code, you can specify the integer values or you can use one of the
+following namespaced variables:
+
+* `YT.PlayerState.ENDED`
+* `YT.PlayerState.PLAYING`
+* `YT.PlayerState.PAUSED`
+* `YT.PlayerState.BUFFERING`
+* `YT.PlayerState.CUED`
+
+[role="mt-4"]
+=== onPlaybackQualityChange
+
+This event fires whenever the video playback quality changes. It might
+signal a change in the viewer's playback environment. See the
+https://support.google.com/youtube/answer/91449[YouTube Help Center]
+for more information about factors that affect playback conditions or
+that might cause the event to fire.
+
+The `data` property value of the event object that the API passes to
+the event listener method will be a string that identifies the new
+playback quality. Possible values are:
+
+* `small`
+* `medium`
+* `large`
+* `hd720`
+* `hd1080`
+* `highres`
+
+[role="mt-4"]
+=== onPlaybackRateChange
+
+This event fires whenever the video playback rate changes. For
+example, if you call the
+link:#setPlaybackRate[`+setPlaybackRate(suggestedRate)+`] method,
+this event will fire if the playback rate actually changes. Your
+application should respond to the event and should not assume that the
+playback rate will automatically change when the
+link:#setPlaybackRate[`+setPlaybackRate(suggestedRate)+`] method is
+called. Similarly, your code should not assume that the video playback
+rate will only change as a result of an explicit call to `setPlaybackRate`.
+
+The `data` property value of the event object that the API passes to
+the event listener method will be a number that identifies the new
+playback rate. The
+link:#getAvailablePlaybackRates[`+getAvailablePlaybackRates+`] method
+returns a list of the valid playback rates for the currently cued or
+playing video.
+
+[role="mt-4"]
+=== onError
+
+This event fires if an error occurs in the player. The API will pass
+an `event` object to the event listener method. That object's
+`data` property will specify an integer that identifies the type of
+error that occurred.
+  
+Possible values are:
+  
+* `2`, The request contains an invalid parameter value. For
+  example, this error occurs if you specify a video ID that does not
+  have 11 characters, or if the video ID contains invalid characters,
+  such as exclamation points or asterisks.
+* `5`, The requested content cannot be played in an HTML5 player or
+  another error related to the HTML5 player has occurred.
+* `100`, The video requested was not found. This error occurs when
+  a video has been removed (for any reason) or has been marked as
+  private.
+* `101`, The owner of the requested video does not allow it to be
+  played in embedded players.
+* `150`, This error is the same as `101`. It's just a `101`
+  error in disguise.
+
+[role="mt-4"]
+=== onApiChange
+
+This event is fired to indicate that the player has loaded (or
+unloaded) a module with exposed API methods. Your application can
+listen for this event and then poll the player to determine which
+options are exposed for the recently loaded module. Your application
+can then retrieve or update the existing settings for those options.
+
+The following command retrieves an array of module names for which you
+can set player options:
+
+[source, js]
+----
+player.getOptions();
+----
+
+Currently, the only module that you can set options for is the
+`captions` module, which handles closed captioning in the player.
+Upon receiving an `+onApiChange+` event, your application can use the
+following command to determine which options can be set for the
+`captions` module:
+
+[source, js]
+----
+player.getOptions('captions');
+----
+
+By polling the player with this command, you can confirm that the
+options you want to access are, indeed, accessible. The following
+commands retrieve and update module options:
+
+[source, js]
+----
+// Retrieving an option:
+player.getOption(module, option);
+
+//Setting an option
+player.setOption(module, option, value);
+----
+
+The table below lists the options that the API supports:
+
+[width="100%",cols="34%,33%,33%",options="header",]
+|===
+|Module |Option |Description
+|captions
+|fontSize
+|This option adjusts the font size of the captions displayed in the player. +
+
+Valid values are `-1`, `0`, `1`, `2`, and `3`. The default size is `0`,
+and the smallest size is `-1`. Setting this option to an integer below `-1`
+will cause the smallest caption size to display, while setting this option
+to an integer above `3` will cause the largest caption size to display.
+
+|captions
+|reload
+|This option reloads the closed caption data for the video that is playing.
+The value will be `null` if you retrieve the option's value. Set the value
+to `true` to reload the closed caption
+data.
+|===
+
+[role="mt-4"]
+=== onAutoplayBlocked
+
+This event fires any time the browser blocks autoplay or scripted
+video playback features, collectively referred to as "autoplay". This
+includes playback attempted with any of the following player APIs:
+
+* link:/youtube/player_parameters#autoplay[`autoplay`] parameter
+* link:#loadPlaylist[`loadPlaylist`] method
+* link:#loadVideoById[`loadVideoById`] method
+* link:#loadVideoByUrl[`loadVideoByUrl`] method
+* link:#playVideo[`playVideo`] method
+
+Most browsers have policies that can block autoplay in desktop,
+mobile, and other environments if certain conditions are true.
+Instances where this policy may be triggered include unmuted playback
+without user interaction, or when a
+https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy[Permissions
+Policy] to permit autoplay on a cross-origin iframe has not been
+set.
+
+For complete details, refer to browser-specific policies
+(https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari/#3030251[Apple
+Safari / Webkit], https://developer.chrome.com/blog/autoplay/[Google
+Chrome], https://support.mozilla.org/en-US/kb/block-autoplay[Mozilla
+Firefox]) and Mozilla's
+https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide[autoplay
+guide].
+
+
+[role="mt-5"]
+== Examples
+
+=== Example 1
+
+Use API with existing <iframe>. In this example, an `<iframe>` element on
+the page already defines the player with which the API will be used. Note
+that either the player's `src` URL must set the
+link:/youtube/player_parameters#enablejsapi[`enablejsapi`] parameter
+to `1` or the `<iframe>` element's `enablejsapi` attribute must be
+set to `true`.
+
+The `onPlayerReady` method changes the color of the border around
+the player to orange when the player is ready. The
+`onPlayerStateChange+ method then changes the color of the border
+around the player based on the current player status. For example, the
+color is green when the player is playing, red when paused, blue when
+buffering, and so forth.
+
+This example uses the following code:
+
+[source, html]
+----
+<iframe id="existing-iframe-example"
+        width="640" height="360"
+        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
+        frameborder="0"
+        style="border: solid 4px #37474F"
+></iframe>
+
+<script type="text/javascript">
+  var tag = document.createElement('script');
+  tag.id = 'iframe-demo';
+  tag.src = 'https://www.youtube.com/iframe_api';
+  var firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  var player;
+  function onYouTubeIframeAPIReady() {
+    player = new YT.Player('existing-iframe-example', {
+        events: {
+          'onReady': onPlayerReady,
+          'onStateChange': onPlayerStateChange
+        }
+    });
+  }
+  function onPlayerReady(event) {
+    document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
+  }
+  function changeBorderColor(playerStatus) {
+    var color;
+    if (playerStatus == -1) {
+      color = "#37474F"; // unstarted = gray
+    } else if (playerStatus == 0) {
+      color = "#FFFF00"; // ended = yellow
+    } else if (playerStatus == 1) {
+      color = "#33691E"; // playing = green
+    } else if (playerStatus == 2) {
+      color = "#DD2C00"; // paused = red
+    } else if (playerStatus == 3) {
+      color = "#AA00FF"; // buffering = purple
+    } else if (playerStatus == 5) {
+      color = "#FF6DOO"; // video cued = orange
+    }
+    if (color) {
+      document.getElementById('existing-iframe-example').style.borderColor = color;
+    }
+  }
+  function onPlayerStateChange(event) {
+    changeBorderColor(event.data);
+  }
+</script>
+----
+
+[role="mt-4"]
+=== Example 2
+
+Loud playback. This example creates a 1280px by 720px video player.
+The event listener for the `onReady` event then calls the link:#setVolume[`setVolume`]
+method to adjust the volume to the highest setting.
+
+[source, js]
+----
+function onYouTubeIframeAPIReady() {
+  var player;
+  player = new YT.Player('player', {
+    width: 1280,
+    height: 720,
+    videoId: 'M7lc1UVf-VE',
+    events: {
+      'onReady': onPlayerReady,
+      'onStateChange': onPlayerStateChange,
+      'onError': onPlayerError
+    }
+  });
+}
+
+function onPlayerReady(event) {
+  event.target.setVolume(100);
+  event.target.playVideo();
+}
+----
+
+[role="mt-4"]
+=== Example 3
+
+This example sets player parameters to automatically play
+the video when it loads and to hide the video player's controls. It also
+adds event listeners for several events that the API broadcasts.
+
+[source, js]
+----
+function onYouTubeIframeAPIReady() {
+  var player;
+  player = new YT.Player('player', {
+    videoId: 'M7lc1UVf-VE',
+    playerVars: { 'autoplay': 1, 'controls': 0 },
+    events: {
+      'onReady': onPlayerReady,
+      'onStateChange': onPlayerStateChange,
+      'onError': onPlayerError
+    }
+  });
+}
+----
+
+////
+[[Example_Control_Spherical_Videos]]
+==== Controlling 360° videos
+
+[[spherical-video-player]]
+
+[width="100%",cols="20%,20%,20%,20%,20%",]
+|===
+a|
+yaw: +
+
+[[yaw-current-value]]
+
+a|
+pitch: +
+
+[[pitch-current-value]]
+
+a|
+roll: +
+
+[[roll-current-value]]
+
+a|
+fov: +
+
+[[fov-current-value]]
+
+|Update properties
+|===
+
+This example uses the following code:
+
+[source,devsite-click-to-copy,notranslate]
+----
+<style>
+  .current-values {
+    color: #666;
+    font-size: 12px;
+  }
+</style>
+<!-- The player is inserted in the following div element -->
+<div id="spherical-video-player"></div>
+
+<!-- Display spherical property values and enable user to update them. -->
+<table style="border: 0; width: 640px;">
+  <tr style="background: #fff;">
+    <td>
+      <label for="yaw-property">yaw: </label>
+      <input type="text" id="yaw-property" style="width: 80px"><br>
+      <div id="yaw-current-value" class="current-values"> </div>
+    </td>
+    <td>
+      <label for="pitch-property">pitch: </label>
+      <input type="text" id="pitch-property" style="width: 80px"><br>
+      <div id="pitch-current-value" class="current-values"> </div>
+    </td>
+    <td>
+      <label for="roll-property">roll: </label>
+      <input type="text" id="roll-property" style="width: 80px"><br>
+      <div id="roll-current-value" class="current-values"> </div>
+    </td>
+    <td>
+      <label for="fov-property">fov: </label>
+      <input type="text" id="fov-property" style="width: 80px"><br>
+      <div id="fov-current-value" class="current-values"> </div>
+    </td>
+    <td style="vertical-align: bottom;">
+      <button id="spherical-properties-button">Update properties</button>
+    </td>
+  </tr>
+</table>
+////