Stopping glitches of full screen video of tablets; Media quires?

Hi All, this is a two part question:

Firstly, I've designed a site which plays a fullscreen video using html5. The video has a image-slideshow playing underneath, so that if someone is using a browser that doesn't support html5 video, they will still see the slideshow. It seems to be working, except the video doesn't seem to be filling the hight 100%; even though it has been specified in the css. Could someone have a look at my code and tell, where i'm going wrong.

Secondly, Ive made the site responsive, but the fullscreen video displays terribly on 768px or lower resolution screens. Does anyone know a fix that I can use in the media quires? or know how i can hide the video when a screen is smaller than 768px?

I've attached the index and main css for your viewing.

Also check the site out here

I hope someone can help.

Thanks

Gary

index.html

style-navy.css