Youtube API 控件留下屏幕的黑色部分答案

【问题标题】：Youtube API controls leaves a black portion of screenYoutube API 控件留下屏幕的黑色部分
【发布时间】：2014-07-07 14:38:15
【问题描述】：

我使用 YouTube API 如下：

<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: '390',
      width: '640',
      playerVars: { 'modestbranding': 1, 'showinfo' : 0,  'controls': 0 },
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

我的 html 中有一个名为 player 的 div。我需要视频没有控件（控件 = 0）。问题是每当我删除控件而不是它们时，都会出现一个黑条。我希望视频扩展并占据整个视频的高度和宽度，而不是用那个黑条代替控件。我在这里错过了什么吗？感谢您对此事的任何看法。

【问题讨论】：

标签： html css video youtube youtube-api

【解决方案1】：

尝试将其添加到您的“playerVars”中：

'autoplay' : 0

【讨论】：

遗憾的是它并没有改变关于黑屏的任何事情。

【解决方案2】：

视频尺寸似乎与您的变量值不匹配。

这看起来更好（例如高度：'360'）：

<html>
<head>
    <title>YT - Test</title>
    <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',
      playerVars: { 'modestbranding': 1, 'showinfo' : 0,  'controls': 0 },
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>
</head>
<body>
<div id="ytplayer"></div>
</body>
</html>

请看https://developers.google.com/youtube/youtube_player_demo

【讨论】：