Why video buttons do not work in browsers after using css?

0

I'm making an application that displays a video on the site with NodeJS, socket io, express.

Only one page with the tag <video> .

I want the video to click on play to be full screen, but that does not happen then I used this css that I took from the internet for the video to occupy 100% of the browser:

<style>
video#V1 { 
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: no-repeat;
    background-size: cover; 
}
</style>

<body>
  <video  id="V1" controls>
  <source src="Videos/a.mp4" type="video/mp4" />
  <source src="Videos/a.webm" type="video/webm" />  
  </video>
</body>

And with that I discovered that the 'play' button or any other of the video only works in Firefox. I've tried with Chrome, Edge, Opera and none of these 'play' buttons work.

When removing css, the 'play' button works normally on any browser ...

Could anyone explain why?

    
asked by anonymous 06.12.2016 / 19:43

0 answers