如果你曾经想在你的网站中嵌入 Youtube 视频，你可能会发现如果直接嵌入，一些未必你想要的元素，比如播放结束后的建议视频等，都会出现。这部分内容虽然个性化很高，但是如果想要让你的用户单纯地观看你喜欢的视频，就会打扰到用户体验。针对这个问题，有一款 npm 包，叫做 youtube.com-extended，可以帮助我们解决。在本文中，我将详细介绍这个 npm 包的使用方法。
安装
首先，我们需要安装这个 npm 包。在终端中输入以下命令，即可在你的项目中安装该包：
npm install --save youtube.com-extended
使用
安装完毕后，我们就可以开始使用这个 npm 包了。在你需要嵌入 Youtube 视频的页面中，引入该包。在这个例子中，我们将用 React 来进行演示，但是使用纯 JavaScript 或者其他前端框架同样适用。
import YouTubePlayer from 'youtube.com-extended';
接着，你需要用你自己的视频 ID，创建一个相应的 URL。这个视频 ID 可以在你看你的视频 URL 中获得。比如，视频 URL 为 https://www.youtube.com/watch?v=dQw4w9WgXcQ，那么视频 ID 就是 dQw4w9WgXcQ。
const videoId = 'dQw4w9WgXcQ';
const videoUrl = `https://www.youtube.com/embed/${videoId}`;在你的 React 中使用此 URL 来创建 YouTubePlayer 组件：
<YouTubePlayer
url={videoUrl}
/>现在你的网页上会显示你的视频。然而，你会发现依然有一些元素（如建议视频）出现了。这时，我们需要用更多的参数来完全控制视频的呈现。
-- -------------------- ---- -------
----- ---------- - -
--------- ----- -- ----------
-------- - -- ------------
----------- -
--------------- -- -- -- ------- ----
---- -- -- ------
--
--
--最后，我们将上面的参数传递给 YouTubePlayer 组件，你的视频就将不会出现任何不必要的元素啦！
<YouTubePlayer
url={videoUrl}
opts={playerOpts}
/>完整代码示例
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
----- ------- - --------------
----- -------- - -------------------------------------------
----- ---------- - -
--------- -----
-------- -
----------- -
--------------- --
---- --
--
--
--
-------- ------- -
------ -
--------------
--------------
-----------------
--
--
-
------ ------- ------总结
使用 npm 包 youtube.com-extended，我们可以定制我们自己的视频播放器，从而控制网页的体验。这个包也提供了其他的元素调整，包括音量，自动播放和缩放等等。希望本文对你学习和使用该 npm 包提供了一些帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de08b