Question

我正在使用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。我需要视频没有控件（controls = 0）。问题是每当我删除控件而不是它们有一个黑条。我希望视频能够扩展并拍摄整个视频的高度和宽度，而不是用黑条代替控件。我在这里错过了什么吗？感谢您对此事的任何启发。

Answer 1

尝试在“playerVars”中添加此内容：

'autoplay' : 0

Answer 2

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

这看起来更好（例如身高：＆＃39; 360＆＃39;）：

<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

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

2 个答案: