は、私は私のプロジェクトでユーチューブの動画を埋め込むために、角2 YTPlayerをを使用していますこんにちは、右クリックに

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>

をユーチューブプレーヤーで透明層を追加＆無効にします。私はユーザーがビデオプレーヤーをクリックまたは右クリックするのを防ぎたい。私はビデオプレーヤーに1つの透明なレイヤーを追加しました。ユーザーはプレーヤーをクリックしたり右クリックしたりすることができません。&中規模の画面サイズではうまくいきます。異なる画面サイズでは機能しません。どのようにプレイヤーに反応させることができますか？ユーザーは任意の画面サイズでプレーヤーを右クリックすることはできません。

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> 

あなたがクリックをキャッチし、それを再interpreteますディレクティブを作成することができます働いていない場合、あなたはそれをhere

を見つけることができます。 フルスクリーン表示の場合を除き、これは機能します