在默认视频海报上使用图标不起作用

时间:2019-05-28 03:17:24

标签: html css angular twitter-bootstrap-3

我有一个视频。我在视频的中心放置了一个文本“ 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”,但它不会消失

0 个答案:

没有答案