概览

本文档介绍如何在应用中嵌入 YouTube 播放器,并定义了 YouTube 嵌入式播放器可以使用的参数。

通过将参数附加到 iframe 网址末尾,您可以自定义应用中的播放体验。例如,您可以使用  参数自动播放多个视频,也可以使用  参数重复播放一个视频。您还可以使用  参数,允许通过 iframe Player API 控制播放器。

目前,本页面定义了任意 YouTube 嵌入式播放器支持的全部参数。每个参数定义均会确定支持相应参数的播放器。

注意:嵌入式播放器必须具有一个尺寸至少为 200x200 像素的视口。如果播放器显示控件,那么它必须足够大,可以在无需将视口缩小到最小尺寸以下的情况下完整显示控件。我们建议 16:9 播放器的宽至少为 480 像素、高至少为 270 像素。

嵌入 YouTube 播放器

您可以使用以下任意一种方法在应用中嵌入 YouTube 播放器并指定播放器参数。请注意,以下说明将介绍如何嵌入会加载单个视频的播放器。接下来的部分将说明如何配置您的播放器,以便加载其他类型的内容(例如播放列表和搜索结果)。

<span style="color:var(--devsite-code-color)">https://www.youtube.com/embed/<strong>VIDEO_ID</strong></span>
<span style="color:var(--devsite-code-color)"><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>
</span>

使用 iframe Player API 嵌入播放器

playerVars
idytplayeronYouTubePlayerAPIReady()
<span style="color:var(--devsite-code-color)"><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>
</span>

选择要播放的内容

您可以配置已嵌入的播放器,以加载视频、播放列表、用户上传的视频或针对特定查询的搜索结果。

以下列表介绍了这些选项:

支持的参数

下面所有的参数都是可选的。