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%;
}

html上的叠加层不会全屏显示

1 个答案: