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

Asked

Viewed 55 times

0

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

Only has 1 page tagged <video>.

I want the video when clicking on play to be in full screen, however this does not happen so 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 video works only in Firefox. I tried with Chrome, Edge, Opera and none of these the 'play' button works.

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

Could someone explain to me why?

javascript html html5-video
  • 2

    It’s hard to help without seeing the HTML... can you put that in the question? Test take the z-index: -100;, it may be that some element is covering...

  • I put the html code, it’s just the body and the video... I tried what I said to take the z-index and it worked, thanks! Can you tell me how to leave it in full screen by clicking play? Vlw

  • Check the console, in the network tab, if the url is right. As you have Videos with large letter can be that the problem.

  • By the way you can create a jsFiddle with a working example that has a bug?

  • 1

    The button only works on Firefox or your screen that does not show the button of other browsers? Look at this example and drag change the max-width for other values. Browsers like Chrome and Edge have no play button in the center of the screen. Usually, only in the bottom right corner. However, change Fiddle with your example as @Sergio said it will be easier to help you. p

  • @Randrade - Control buttons appear in all browsers yes. I’m using this with Nodejs to test the video run on multiple browsers at the same time, synchronized. so I’m opening the site up on mobile.

Show 1 more comment
No answers

Browser other questions tagged javascript html html5-video

You are not signed in. Login or sign up in order to post.