Question

.wrapper-noaction {
    position: absolute;
    margin-top: -558px;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

.video-stat {
    width: 94%;
    margin: 0 auto;
}

.player-control {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1000;
    height: 7.5%;
    padding-top: 8px;
}

.control {
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    color: #fff;
}

<div class="video-stat">
    <div class="row">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="ytplayer" class="embed-responsive-item"></div>
            <div class="wrapper-noaction"></div>
        </div>
    </div>
    <div class="row">
        <div class="player-control text-center">
            <span class="control" (click)="play();start=!start"><i class="icon-control-play" [class.icon-control-play]="start" [class.icon-control-pause]="!start" aria-hidden="true"></i></span>
            <span class="control" (click)="stop();start=true"><i class="fa fa-stop" aria-hidden="true"></i></span>
            <span class="control" (click)="volume()"><i class="icon-volume-2" [class.icon-volume-2]="!ismuted" [class.icon-volume-off]="ismuted" aria-hidden="true"></i></span>
        </div>
    </div>
</div>

你好我正在使用angular 2 ytplayer在我的项目中嵌入youtube视频。我想阻止用户点击或右键点击视频播放器。我在视频播放器上添加了一个透明层，因此用户将无法点击或右键点击播放器＆amp;它适用于中等尺寸的屏幕。但是，不适用于不同的屏幕尺寸。我怎样才能让它与玩家一起响应。所以用户无法在任何屏幕尺寸上右键点击播放器。

Answer 1

为避免用户点击视频，您应该将其放在背景上。这是一个小例子：

<div id="bgndVideo" class="player" 
     data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">
</div>

你可以找到它here

如果它不起作用，您可以创建一个指令来捕获点击并重新解释它。这应该有效，除非你全屏显示

最诚挚的问候，

在youtube播放器上添加透明层＆amp;禁用右键单击

1 个答案: