hide an unrelated div when video playing

I'd like to hide my page's navigation when video is playing, just like the play button does. Here's the script that succesfully hides the play button:

<script>
$('.vid').parent().click(function () {
if($(this).children(".vid").get(0).paused){
$(this).children(".vid").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".vid").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>

And this script I tried to hide my navigation bar with:

<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
</script>    

Here's link to my site

Try using the jQuery .toggle() function;

$('.vid').parent().click(function () {
    $(".navbar").toggle();
});