我正在尝试嵌入YouTube视频，并希望创建用户无法与之交互的视频。我已经设法删除了所有ui内容，但似乎无法阻止点击。我偶然发现一个正在执行exactly what I want to do的网站：在右下角，有一个youtube视频，带有明显的覆盖层，可防止点击；看起来似乎很简单，但我无法弄清楚！任何建议将不胜感激。到目前为止，这是我的代码：
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var start = 30;
var end = 35;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',
width: '400',
videoId: 'BalUcQpYN6k',
playerVars: {
'autoplay': 1,
'controls': 0,
'disablekb': 1,
'start': start,
'end': end,
'fs': 0,
'iv_load_policy': 3,
'loop': 0,
'modestbranding': 1,
'showinfo': 0,
'rel': 0
}
});
}
</script>
</body>
</html>最佳答案
您可以简单地将此添加到您的CSS。
#player {pointer-events: none;}
#player {pointer-events: none;}<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var start = 30;
var end = 35;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',
width: '400',
videoId: 'iRkCIuY2pHc',
playerVars: {
'autoplay': 1,
'controls': 0,
'disablekb': 1,
'start': start,
'end': end,
'fs': 0,
'iv_load_policy': 3,
'loop': 0,
'modestbranding': 1,
'showinfo': 0,
'rel': 0
}
});
}
</script>
</body>
</html>我不知道一年后如何回到这里，但是出于好奇，我去了一下OP的链接，而
pointer-events: none正是他们所使用的，如下所示。.player-container > .modal-inner-container > #player, .player-container > .modal-inner-container #html5-player, .lyrics-container > .modal-inner-container > #player, .lyrics-container > .modal-inner-container #html5-player {
pointer-events: none;
width: 100%;
height: 100%;
background-color: #000;
关于javascript - 在YouTube播放器上创建CSS叠加层以防止点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41755551/