Javascript 在嵌入式YouTube视频上只保留进度条和控件？_Javascript_Html_Css_Youtube_Embed

Javascript 在嵌入式YouTube视频上只保留进度条和控件？

javascript html css youtube

Javascript 在嵌入式YouTube视频上只保留进度条和控件？,javascript,html,css,youtube,embed,Javascript,Html,Css,Youtube,Embed,几个小时以来，我一直在寻找一种将YouTube视频嵌入音频播放器的方法，但我一直运气不佳。我发现主要有三种选择： 1.使iframe的高度达到25px，但我真的很讨厌它的外观。 2.使用“播放”和“暂停”按钮，但这样我就没有进度条了。 3.我在某个地方读到，你只能隐藏视频，但用css保留控件，但我无法成功实现这一点有人能告诉我怎么做吗编辑：我有一个可能的解决方案，但我有一个问题。代码如下： <html> <head> <style>

几个小时以来，我一直在寻找一种将YouTube视频嵌入音频播放器的方法，但我一直运气不佳。我发现主要有三种选择：

1.使iframe的高度达到25px，但我真的很讨厌它的外观。 2.使用“播放”和“暂停”按钮，但这样我就没有进度条了。 3.我在某个地方读到，你只能隐藏视频，但用css保留控件，但我无法成功实现这一点

有人能告诉我怎么做吗

编辑：我有一个可能的解决方案，但我有一个问题。代码如下：

<html>
  <head>
    <style>
      iframe{
        height:0;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="playeroptions.js"></script>
  </head>
  <body>
    <audio id="player2" preload="none" controls>
      <source src="https://www.youtube.com/watch?v={{id}}" type="video/x-youtube">
    </audio>
  </body>
</html>

在我的网站中，我无法按下音频播放器中的任何按钮。我怎样才能解决这个问题？另外，我得到以下错误：

Refused to execute script from 'http://127.0.0.1:8000/player/9XvXF1LrWgA/playeroptions.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

您在评论中说，将iframe设置得非常小后，视频仍然可见。这是因为视频总是会缩小/增大到它的播放器大小。解决方法是让玩家非常兴奋。YT播放器将保持视频的纵横比，因此，由于这一点，我们将以黑条和底部和顶部结束。然后在父div中绝对它，隐藏它之外的内容，现在我们只有黑色背景的控件

CSS:

.player {
  width: 500px;
  height: 35px;
  overflow: hidden;
  position: relative;
}

.player iframe {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2000px;
  border: none;
}

<div class="player">
   <iframe src="https://www.youtube.com/embed/F4jYWOqHPEA?autoplay=1"></iframe>
</div>

HTML:

.player {
  width: 500px;
  height: 35px;
  overflow: hidden;
  position: relative;
}

.player iframe {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2000px;
  border: none;
}

<div class="player">
   <iframe src="https://www.youtube.com/embed/F4jYWOqHPEA?autoplay=1"></iframe>
</div>

Fiddle:

“调整iframe 25px的高度，但我真的很讨厌它的外观”你说的“外观”是什么意思？听起来这是唯一合乎逻辑的方法，那么到底哪里出了问题？因为YT不支持它，所以没有办法以“官方”的方式做到这一点，因为它是视频服务而不是音乐服务（谈论标准YT而不是YT音乐）。播放器应该播放广告，而你却在用隐藏的视频流屏蔽它们。它实际上仍然显示视频，只是缩放到25像素的高度，所以这不是我想要的。就我所知，我所做的并没有阻止广告，即使阻止了，我也不是为了一个公共网站，而是为了一个学校项目。因此，我不是在寻找一种“官方”的方式来做到这一点。我正在寻找一种方法，仍然会让我一个好成绩，无论是否合法，因为我不会上传网站。我知道这样做是可能的，因为我已经制作了自己的播放和暂停按钮，所以进度条也应该是可能的。谢谢你的回答！我有另一个解决办法，但我有一个问题。你能帮助我吗？我将编辑张贴代码的帖子。