Как сделать кнопку play для видео
Нужно чтобы при нажатии скрывался тег .students__play-pause и видео запускалось. И чтобы видео было без панели управления. При нажатии на видео оно должно просто останавливаться и появляться заставка как начале. И чтобы если одно видео запускалось, то другое останавливалось. Помогите пожалуйста, 2 дня уже пытаюсь решить, а работу надо сдавать. Спасибо заранее, если попытаешься решить
<div class="box">
<ul class="box__list">
<li class="box__list-item">
<div class="box__player">
<video class="students__video">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
<button class="box__play-pause">
<p>Смотреть видео</p>
</button>
</div>
</li>
<li class="box__list-item">
<div class="box__player">
<video class="students__video">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
<button class="box__play-pause">
<p>Смотреть видео</p>
</button>
</div>
</li>
<li class="box__list-item">
<div class="box__player">
<video class="students__video">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
<button class="box__play-pause">
<p>Смотреть видео</p>
</button>
</div>
</li>
</ul>
</div>
.box__list {
display: flex;
}
.box__list-item {
}
.box__player {
position: relative;
width: 300px;
height: 512px;
border-radius: 30px;
overflow: hidden;
}
.box__video {
width: 100%;
}
.box__play-pause {
position: absolute;
background: rgba(0, 0, 0, 0.4);
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box__play-pause p {
position: absolute;
top: 333px;
left: 80px;
z-index: 7;
}