Карусель видео и изображений ⇐ CSS

[Anonymous]

Здесь нуб в программировании У меня есть удобный слайдер-карусель с изображениями и видео.
По какой-то причине видео будет воспроизводиться только в том случае, если установлено автоматическое воспроизведение. Я не могу получить элементы управления для воспроизведения?
Это мой код:

Код: Выделить всё

// Get the video
var video = document.getElementById("myVideo");

// Get the button
var btn = document.getElementById("myBtn");

// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}

Код: Выделить всё

.hero #myVideo{
margin-top: 40px;
position: absolute;
z-index: 8000000;
}
.hero img, video{
position: relative;
background-size: cover;
background-position: center;
margin: 0;
height: 1600px;
z
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(
0 0,
100% 0,
100% 84%,
100% 84%,
50% 100%,
0% 84%,
0 84%
);
}
.layer::after {
content: "";
background: rgba();
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
clip-path: polygon(
0 0,
100% 0,
100% 84%,
100% 84%,
50% 100%,
0% 84%,
0 84%
);
}

.layer > * {
z-index: 10;
}

Код: Выделить всё

[img]https://fastly.picsum.photos/id/91/3504/2336.jpg?hmac=tK6z7RReLgUlCuf4flDKeg57o6CUAbgklgLsGL0UowU[/img]

I am John Doe
And I'm a Photographer
Hire me




[img]https://fastly.picsum.photos/id/91/3504/2336.jpg?hmac=tK6z7RReLgUlCuf4flDKeg57o6CUAbgklgLsGL0UowU[/img]

I am John Doe
And I'm a Photographer
Hire me






Your browser does not support the video tag.

The video will work if its on autoplay but not on controls? Have a feeling the play/pause needs to be more dominant but adding a z-index to the controls didn't do anything?
Any help or tips on how to integrate videos and images in the slick slider would be so greatful.


Источник: https://stackoverflow.com/questions/781 ... e-carousel