Как сделать кнопку 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;
    }

Ответы (0 шт):