No se por qué no me aperece ningun video al poner este código:
import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import './Carousel.css'
export default function Carousel() {
return (
<React.Fragment>
<CssBaseline />
<div class='vidContain'>
<div class='vid'>
<video loop autoPlay>
<source src="videocarousel.mp4" type="video/mp4" ></source>
</video>
</div>
<div class='content'>Team Manager es juego en equipo</div>
</div>
</React.Fragment>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
.vidContain {
height: 600px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
height: 90vh;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
El caso es que si sustituyo la etiqueta <video>
por el paquete React Player
:
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
sí funciona. Por lo que me lleva a pensar que el bug está en la etiqueta <video>
El problema es que ReactPlayer
no me sirve porque me aparecen los controles de Youtube
, aparte de otras desventajas. Me gustaría hacerlo con la etiqueta video.