HTML (视频悬停 (div)/按钮)

Question

这是带有悬停按钮的视频的工作代码

<div class="video">
<iframe 
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">&#9646;&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>

.CSS

.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 30px; z-index: 0; width: 100%; text-align: left; 
left: 10px;}

它像它应该的那样工作，但我想问，我如何让它像"这个网站"一样，按钮只在视频播放时显示？ + (样式(

地点： https://www.rolex.com/

Answer 1

您的 CSS 正在寻找您使用过 iFrame 的图像

尝试替换此行.video iframe {display: block;}

将img更改为iframe