Mostrar video de fondo en un div en Reactjs

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 /> 

si 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, a parte de otras desventajas. Me gustaría hacerlo con la etiqueta video.