我试过很多东西都没有成功。 我有一个视频,上面有一个 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;
}
最佳答案
任何宽度/高度设置为 100% 的元素都只会与其父元素一样大。我会尝试将其添加到您的 CSS 中:
html, body, .video_display {
width: 100%;
height: 100%;
}
关于javascript - 覆盖在 html 上不会全屏显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29151675/