javascript - 覆盖在 html 上不会全屏显示

Question

我试过很多东西都没有成功。我有一个视频，上面有一个 div 作为覆盖，点击视频将播放。一切正常，但在全屏模式下，无论 css 是什么，都不会显示叠加层。这只发生在 chrome 和 safari 中。

这就是我的。

    <div class="video_display" >
    <div id="play-pause-overlay" style="display: block;">
        <div class="play-overlay"></div>
    </div>
    <video webkit-playsinline="true" allowfullscreen="true" class="sm_video">
        <source src="http://assets/video/bbb_trailer_1080p.mp4?ts=961">
    </video>
    <div id="video-controls" style="position: absolute; z-index: 2147483647; opacity: 0.9; border-radius: 5px;">
        <div id="rewind" class="control_button">
            <div class="rewindIcon"></div>
        </div>
        <div id="play-pause" class="control_button_play">
            <div class="playIcon"></div>
        </div>
        <div id="SeekBar">
            <div class="seek-bar-container">
                <div id="seek-bar" class="bar"></div>
            </div>
        </div>
        <div id="Duration">
            <div class="duration">00:00/00:00</div>
        </div>
        <div id="Mute" class="control_button">
            <div class="muteIcon"></div>
        </div>
        <div id="volume-container" class="volumeDiv">
            <input id="volume-bar" type="range" min="0" max="1" step="0.1" value="1">
        </div>
        <div id="Full" class="control_button" style="display: inline-block;">
            <div class="fullIcon"></div>
        </div>
    </div>
</div>

css文件:

.play-overlay { position: relative;
 z-index: 100000000;
 opacity: 0.6;
}

#play-pause-overlay{ 
  cursor: pointer; 
  width: 100%; 
  position: absolute; 
  height: 100%; 
  background: url('//PlayIconOverlay.png') no-repeat center;
  z-index: 100000; 
  opacity: 0.5;
}

Answer 1

任何宽度/高度设置为 100% 的元素都只会与其父元素一样大。我会尝试将其添加到您的 CSS 中:

html, body, .video_display {
    width: 100%;
    height: 100%;
}