<video> no ajusta a la pantalla

Tengo una web con un video de fondo, pero no se ajusta bien en todos los exploradores, aveces se ve diferente en "Mozilla Firefox, Google Chrome, Opera"

el link es el siguiente: www.radiomyhouse.com/ya

Cuidado con utilizar porcentajes y más en un video, ya que el width va directamente proporcional al height y viceversa. ¿Qué problemas tienes? ¿Es el ancho al que te refieres? Toma unas capturas para poder ayudarte más.

Saludos.

Con mi CSS:


Con el CSS original:


Al parecer el video se mete un poco, no se porque

Pega aquí el estilo de la sección del video original y tu modificación. Debe de haber algún margen que se te resbaló.

CODIGO HTML:

Código HTML :

<div id="hero-wrapper">
   <div id="mensajes" style="z-index:1;filter:alpha(opacity=77);float:left;-moz-opacity:.77;opacity:.77">
      <fb:live-stream event_app_id="208194232592753" width="380" height="660" always_post_to_friends="false" via_url="http://www.radiomyhouse.com"></fb:live-stream>
   </div>
   <div class="video">
      <video autoplay="yes" id="home_video" class="video" loop="loop">
            <source src="http://www.teehanlax.com/wp-content/themes/teehan-lax/resources/video/1.mp4"/>
            <source src="http://www.teehanlax.com/wp-content/themes/teehan-lax/resources/video/1.ogv" type='video/ogg; codecs="theora, vorbis"'/>
            <img src="http://www.teehanlax.com/wp-content/themes/teehan-lax/resources/video/1.jpg" id="header_video_img">
      </video>
   </div>
</div>

CODIGO CSS

Código :

div.video {position: absolute;top: 0;left: 0;width: auto;height: 510px;overflow: hidden;}
video#home_video_2,video#home_video_3 {display: none;}
div.video img {width: 100%;height: 510px;}

@media screen and (min-width: 1145px) and (max-width: 1279px) {
div.video {width: 100%;height: auto;}
div.video video { width: 100%; height: auto}
} 

@media screen and (min-width: 1280px) and (max-width: 1420px) {
div.video {height: 660px !important;width: auto;}
div.video video { height: 100% !important; width: auto}
}

@media screen and (min-width: 330px) and (max-width: 1024px) {
div#hero-wrapper {width: 488px;}
div.video {height: 100%;width: auto;}
}

@media screen and (min-width: 1025px) and (max-width: 1279px) {
div#hero-wrapper {width: 680px;}
div.video {width: auto;height: 100%;}
}

@media screen and (min-width: 1280px) and (max-width: 1879px) {
div#hero-wrapper {width: 919px}
div.video {position: absolute;top: 0;left: 0;width: 100%;height: 660px;}
div.video video { width: 100%; height: auto;}
}

@media screen and (min-width: 1880px) and (max-width: 2119px) {
div#hero-wrapper {width: 1600px;}
div.video {width: 100%;height: 710px;}
div.video video { width: 100%; height: auto;}
}

@media screen and (min-width: 2120px) {
div#hero-wrapper {width: 1840px;}
div.video {width: 100%;height: 710px;}
div.video video { width: 100%; height: auto}
}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }