I have the following code:
*{ background: gray;
display: block;
}
body {
text-align: center;
}
#reproducir {
width: 720px;
margin: 20px auto;
padding: 5px;
background: #999;
border: 1px solid #666;
border-radius: 5px
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Programando Reproductor</title>
<script type="text/javascript" src="Reproductor.js"></script>
<link rel="stylesheet" type="text/css" href="Reproductor.css">
</head>
<body>
<section id="reproducir">
<video id="video" width= "720" height= "400" src="musica.mp4" controls loop>
</video>
<nav>
<div id="botones">
<button id="reproducir" type="button" >
Reproducir
</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
And, how it looks in the following capture, the title of the page appears in the body of the page:
Why does that happen and how can I solve it?