ビデオ要素が含まれている場合、flexプロパティが期待どおりに機能しない

bugfix> javascript > 投稿 2020-08-22 20:24

私はビデオを表示する必要があり、ユーザーがメニューを押すと、画面を垂直に2つに分割し（互いに隣接する）、前半の中央（水平および垂直）にテキストを表示し、リストを表示する必要があります（これはJavaScriptを使用して動的に作成されます）後半（これはすべて、ビデオがバックグラウンドで再生されている間に発生します。基本的にメニューは透明である必要があります）。次のように、flexを使用して親divと2つの子divを作成しました。

htmlコード：

<!DOCTYPE html>
<html>
    <head>
        <title>VOD</title>
        <script src='js/index.js'>
        </script>
        <style>
            html, body
            {
                height:100%
            }
            #vid
            {
                position: fixed;
                top: 50%; left: 50%;
                z-index: 1;
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                transform: translate(-50%, -50%);
            }
            #mid {
                display: flex;
                height: 100vmin;
                justify-content: stretch;
                flex-flow: row nowrap;
                background: blueviolet;
                z-index: 2;
            }
            #mid1, #mid2 {
                flex: 1;
            }
            #mid1 {
                display: flex;
                justify-content: center;
                align-items: center;
                background: red;
                text-align: center;
            }
            #mid2 {
                display: flex;
                justify-content: center;
                align-items: center;
                background: blue;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--<video id='vid' src='textMotion.mp4' autoplay loop></video>-->
        <div id='mid' style="display:none">
        <!--<div id='mid'>-->
            <div id='mid1'>
                <h2>text1</h2>
            </div>
            <div id='mid2'>
                <h2>text2</h2>
            </div>
        </div>
    </body>
</html>

JavaScriptコード：

function changeChannel(e) {
    console.log('received keyEvent : ' + e.keyCode);
    let keyCode = e.keyCode;
    if(keyCode == 77) {
        document.getElementById('mid').style.display = 'block';
    }
}
document.addEventListener('keydown', changeChannel);

私は以下の問題に直面しています。

1）「M」を押すと、メニューが表示されません。ビデオがバックグラウンドで実行されている間、透明な画面（2 divの文字列）を表示する必要があります。

2）テスト目的で、ビデオ要素をコメントしました。次に「M」を押すと、2つのdivが上部に水平に表示されます。

属性「display = none」をmidに追加しない場合のみ、期待どおりに機能します。誰でもこの問題を解決するのを手伝ってください。

CSSクラス .hidden {display: none;} を作成するそれを #mid に割り当てます素子

JSでは Element.classList を使用しますそしてそれは .toggle() ですその 'hidden' を切り替える方法クラス

#vid を設定 z-inedx: -1 へそれはバックグラウンド あなたの#mid position はありませんセットする。

var EL_mid = document.getElementById('mid')
function changeChannel(e) {
  if (e.key === 'm') {
    EL_mid.classList.toggle("hidden");
  }
}
document.addEventListener('keydown', changeChannel);

*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
#vid {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
#mid {
  display: flex;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
  z-index: 2;
}
#mid.hidden {
  display: none; 
}
#mid1,
#mid2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  text-align: center;
}
#mid1 {background: red;}
#mid2 {background: blue;}

<video id='vid' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' autoplay loop></video>
<div id='mid' class="hidden">
  <div id='mid1'>
    <h2>text1</h2>
  </div>
  <div id='mid2'>
    <h2>text2</h2>
  </div>
</div>

わかりました。jqueryを使用している場合は、 display: hidden を切り替えることができます。および display: block または、次のルールを持つクラス.hiddenを追加できます： display: hidden @RokoCBuljanが言ったように、要素に要素があるかどうかをonclickで切り替えます。
```
html,body {
  width: 100%;
  height: 100%;
}
#vid {
  display: block;
  position: fixed;
  bottom: 12%; left: 30%;
  background: slateblue;
  height: 300px;
  width: 360px;
}
#mid {
  display: flex;
  z-index: 1;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
}
#mid1, #mid2 {
  flex: 1;
}
#mid1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  text-align: center;
}
#mid2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
  text-align: center;
}
```
プロパティ position: fixed; で私は通常のフローと z-index の外側にdivを取得しています他のdivの上に配置されることを確認するだけです...より良い外観を追加する場合は、 opacity: 1; のプロパティ（作成する必要のあるトグル機能を使用）を追加します。および opacity: 0; そのため、フェードインおよびフェードアウトします

作業ペン：https://codepen.io/manAbl/pen/WJqRKR?editors=0100;

希望が役立ちます:)

bugfix

ビデオ要素が含まれている場合、flexプロパティが期待どおりに機能しない

javascript

css

html5

関連記事