背景
在很多网站上，当用户观看视频时，相关视频推荐会出现在视频播放器周围。这些视频可能会分散用户的注意力，甚至跟本来想观看的视频主题不相关。
对于某些网站和应用程序，如在线学习和培训平台、品牌官方网站等，禁用相关视频可能是一个比较好的选择。这样可以确保用户只关注当前正在观看的内容，而不被其他不相关的信息干扰。
解决方案
禁用相关视频通常可以通过两种方式实现：
1. 使用第三方库或插件
有很多第三方库或插件可以帮助我们禁用相关视频。其中最流行的是 video.js 和 Plyr。
video.js
使用 video.js，我们可以简单地在初始化视频播放器时为其传递一个 related 参数，并将其设置为 false，如下所示：
-- -------------------- ---- -------
------ ------------- --------------- ----------------- -------- -------------- ----------- -------------
------- ------------------ --------------------------
--------
------- ----------------------------------------------------------
--------
--- ------ - ------------------- -
-------- -
----- ---------------
---------- -----
-
---
---------Plyr
使用 Plyr，我们可以在初始化播放器时将 hideControls 和 hideOverlay 参数设置为 true，如下所示：
-- -------------------- ---- -------
---- ------------------------- ------------
-------
-----------------------------------------------------
---------------
-----------------
----------------
----------
------
------- -------------------------------------------------
--------
----- ------ - --- --------------- -
------------- -----
------------ -----
---
---------2. 自定义解决方案
如果你想完全控制自己的代码，那么你也可以通过自定义一些样式和脚本来禁用相关视频。
首先，你需要查找页面上的相关视频元素，并隐藏它们。对于大多数网站来说，这些元素通常被嵌套在 iframe 标记中。可以使用 CSS 将它们隐藏，如下所示：
iframe[src*="youtube.com/embed/"][data-related="1"] {
display: none;
}然后，你需要禁止点击相关视频链接。你可以使用 JavaScript 来实现这一点。以下是一个示例代码：
-- -------------------- ---- -------
----- ------- - ------------------------------------------------------
--- ---- - - -- - - --------------- ---- -
----- ------ - -----------
------------------------------------ -- -- -
-------------------------- - -------
---
----------------------------------- -- -- -
-------------------------- - -------
---
-总结
禁用相关视频可以让用户更加专注于当前正在观看的内容，并提高用户体验。本文介绍了两种实现方式：使用第三方库或插件以及自定义解决方案。无论你选择哪种方式，都应该考虑到网站或应用程序的整体需求和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14784