jquery - Dailymotionビデオと同じように、画面解像度に基づいて幅を変更します

Question

デイリーモーションビデオで、URLの下にクールなものが開いていて、ビデオの上に「ライトをオフにする」オプションがあるのを見ましたが、ビデオはすべて黒くなります。

クールなことは、黒い調光器が動的に変化してもウィンドウの解像度のサイズを変更することです。誰でもこれをどのように行っているか知っていますか。

jqueryまたはjavascriptでのウィンドウのサイズ変更に基づいて、このようなものを実装したいと考えています。

Answer 1

このスタイルを動画に適用 -

#video{
z-index:3;
}

そして黒いレイヤーを作ります-

<div id="bl">
</div>

黒レイヤーのスタイル -

#bl{
background-color:black;
opacity:0.9;
z-index:2;
visibility:hidden;
width:100%;height:100%;
}

そしてJS -

$('#btn').click(function(){ 
  $('#bl').css('visibility','visible'); 
});

#btn は、消灯ボタンの ID です。

そして、各質問で正しい答えを選択してください。

Answer 2

そのためのイベントがあります。

$(window).resize(function(evt) { 
   // your handling code here 
});