У меня есть секция(скрин ниже). На видео стоит картинка в виде загрушки
poster="img/video-bg.jpg" при нажатии на кнопку в центре секции описание + кнопка + заглушка должны пропасть и должно начаться воспроизведение видео.
Я наживаю на кнопку. Кнопка с описанием пропадает, а вот картинка никуда не девается и видео не воспроизводиться.
https://jsfiddle.net/8o89hfbf/
<section class="video">
<video class="video_it" src="" id="videobg" width="100%" height="auto" preload="auto" poster="img/video-bg.jpg">
<source src="video/video-bg.mp4">
<source src="video/video-bg.webm">
</video>
<div class="video_panel text-center">
<p class="video_descr">Explore Our Awesomeness</p>
<div class="video_play" id="play"></div>
<p class="video_info">Click to play the video</p>
</div>
</section>
.video {
color: #fefefe;
min-height: 500px;
position: relative;
overflow: hidden;
}
.video_descr {
font-size: 30px;
font-family: "poppins-medium", sans-serif;
}
.video_info {
font-size: 15px;
font-family: "poppins-regular", sans-serif;
}
.video_play {
background-image: url(../img/sprite.png);
background-position: -216px -86px;
width: 80px;
height: 80px;
display: inline-block;
margin: 0.66667rem 0 1.8rem;
}
.video_it {
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
position: absolute;
}
var e = $("#videobg")[0];
$("#play").click(function () {
$(this).closest(".video_panel").hide(300), e.play()
}), e.addEventListener("ended", function () {
$(".video_panel").show(300)
})