j1-template 2024.3.17 → 2024.3.18

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

@@ -1,1638 +0,0 @@
----
-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>
-////