How to include a close button in HTML5 video player - html

Question

I have a HTML5 video which works fines,the problem that I have is that it doesn't have a close button.How can I include the close button in the video player?
Here is my code:
<div style="text-align:center">
<video id="playvideo" width="450" controls>
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
</video>
</div>
http://jsfiddle.net/76j7129f/3/

Answer 1

SOLUTION
HTML
<div style="text-align:center">
<video id="playvideo" width="450" controls="controls" >
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
</video>
<button class="close">Hide</button>
</div>
CSS
video + button.close {
font-size: 10px;
display: block;
}
video.hide {
display: none;
}
JS
var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
var buttons = document.querySelectorAll('video + button.close');
for(var b = 0; b < buttons.length; b++){
var button = buttons[b];
button.addEventListener('click', function(){
var video = this.parentNode.childNodes[1];
video.muted = !video.muted;
video.classList.toggle (hideClass);
if(this.textContent == hideStr) this.textContent = showStr;
else this.textContent = hideStr;
});
}
UPDATE
JQUERY SOLUTION
HTML
<script src="//code.jquery.com/jquery-git1.js"></script>
JQUERY
var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
$('video + button.close').click(function(){
var button = $(this);
var video = button.parent().find('video');
video.prop('muted', !video.prop('muted'));
video.toggleClass(hideClass);
if(button.text() == hideStr) button.text(showStr);
else button.text(hideStr);
});