hide an unrelated div when video playing

Question

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

Answer 1

Try using the jQuery .toggle() function;

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

Answer 2

You didn't close your function and if statement

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