¿Cómo ponerle complementos a mi reproductor de videos?
Publicado por Enrique (4 intervenciones) el 30/06/2021 04:14:20
Hola amigos que tal. Estoy realizando un reproductor de videos para mi proyecto de pagina web. Tengo unos problemas en mi código y no se cómo corregirlo, además de que quiero agregarle unos complementos a ver si me pueden ayudar.
En primera instancia tengo dos videos pero, como se pueden dar cuenta, el video de la pagina 1 no sale completo, sino a la mitad y además se ve la mitad del video 2, y cuando me muevo a la otra pagina, el video 2 aparece completo. ¿Cómo puedo corregir eso?
También me gustaría agregarle los botones de 'next' y 'previous' a los lados, y además no logro encontrar la manera de que si estoy reproduciendo un video y me muevo al siguiente, se deje de reproducir el video que tenia puesto. Les agradecería su apoyo.
En primera instancia tengo dos videos pero, como se pueden dar cuenta, el video de la pagina 1 no sale completo, sino a la mitad y además se ve la mitad del video 2, y cuando me muevo a la otra pagina, el video 2 aparece completo. ¿Cómo puedo corregir eso?
También me gustaría agregarle los botones de 'next' y 'previous' a los lados, y además no logro encontrar la manera de que si estoy reproduciendo un video y me muevo al siguiente, se deje de reproducir el video que tenia puesto. Les agradecería su apoyo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="video-player">
<div class="vids">
<input type="radio" name="video-slide" id="vid1" checked>
<input type="radio" name="video-slide" id="vid2">
<iframe class="v1" alt="vid1" width="100%" height="380px" src="https://www.youtube.com/embed/tTHUG64h4yA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="v2" alt="vid2" width="100%" height="380px" src="https://www.youtube.com/embed/_C_9WCi0K7M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="dots">
<label for="vid1" class="selected"></label>
<label for="vid2"></label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>
</html>
<script>
const botones=document.querySelectorAll(".dots>label");
botones.forEach(el => el.addEventListener("click", pulsado));
function pulsado(e) {
botones.forEach(el => el.classList.remove("selected"));
this.classList.add("selected");
}</script>
<style>
.selected {
background-color: black!important;
}.video-player{
background-color: tomato;
width: 60%;
margin: 0 auto; overflow: hidden; position: relative; }.vids{
background-color: teal;
width: 80%;
height: 380px; margin: 0 auto; display: flex; }.vids input{
display: none; }.dots{
display: flex;justify-content: center;
}.dots label{
height: 12px; width: 12px;background-color: darkslategray;
border-radius: 50%;
cursor: pointer; margin: 4px 8px; }.dots label:hover{
background-color: gray;
} #vid1:checked ~ .v1{margin-left: 0;
} #vid2:checked ~ .v2{margin-left: -100%;
}</style>
Valora esta pregunta
0
