我有一个视频。我在视频的中心放置了一个文本“ Click Me”。
我的要求是-单击“点击我”或视频的任何部分时,视频应播放并且“点击我”消失。
.banner-description{
position: absolute;
font-weight: bold;
top : 50%;
left: 50%;
background: rebeccapurple;
}
.video-banner{
position: relative;
}
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis laudantium nobis laboriosam quaerat. Quo, veritatis harum nemo eligendi sed dicta fugiat ad. Voluptas ea maxime qui nostrum blanditiis facere natus!
</div>
<div class="video-banner">
<video controls>
<source src="011-video-files.mp4">
</video>
<div class="banner-description">
<p>Click Me</p>
</div>
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde explicabo repellat minima magnam totam, temporibus nemo saepe praesentium ipsam a quidem. Mollitia vero impedit architecto quod ex voluptates neque eveniet!
</div>
</body>
问题是:单击“单击我”时,什么也没有发生。并且,在点击视频的其他部分时,尽管视频开始显示“ Click Me”,但它不会消失