There is a picture as a background and a block on top.
With this code on the ~ key I hide the block, only the background image remains:

 addEventListener("keydown", function(event) { if (event.keyCode == 192) document.body.style.display = (document.body.style.display === 'none') ? 'block' : 'none'; })

Now I put the video on the background through the video tag, but when I click ~ , the block is hidden along with the background video and the white background remains, and only the block should be hidden. What am I doing wrong?

  • Show me an example with a picture that works with a video that doesn’t work - Grundy
  • You completely hide the body "body" and the video probably is in the body itself, or when it is hidden the size (height) of the page is 0 - Daniel
  • @Grundy For a picture of the js-code above is enough if the background-image in css pastebin.com/VNaw5WRs stands - Viiild
  • @ Daniel, do not tell me how to change the js code so that not the whole body is hidden (although for the picture it works), but only for section, for example or where should I put the video? - Viiild
  • one
    Dmitry, in order to get a clear question, you need to at least explain what you are doing, what you want to achieve ... well, there is a piece of js code, everyone understands what it is doing, but what exactly you want and what you can't do is not it is clear in general ... @Grundy is right for you, he said, put the code, not the link, and describe normally that it doesn’t work ... - Air

1 answer 1

What is that type of thing?

 addEventListener("keydown", function(event) { if (event.keyCode == 192) document.getElementById("videobg").style.display = (document.getElementById("videobg").style.display === 'none') ? 'block' : 'none'; // document.body.style.display = (document.body.style.display === 'none') ? 'block' : 'none'; }) 
  body { margin: 0; background: #000; } video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat; background-size: cover; transition: 1s opacity; } body { background: url(https://i.pinimg.com/originals/0d/cb/46/0dcb4612451fd35a55a2a28a11ca2b50.jpg) #000 no-repeat fixed; background-size:cover; background-position:center; } 
 <video id="videobg" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> </video>

  • Yes, that's exactly the way I have now just over the top in section I still have the text, but it’s necessary that instead of a picture after clicking ~ continued to play this video, the text disappeared - Viiild
  • Well, I do not know, like what you need. You did not show the code, the task is completed. You can redo this code for yourself and mark the answer with a solution. Or all the same to show your code. We're not here) - Daniel
  • one
    Therefore, Daniel, you shouldn’t answer such abstract questions, he doesn’t ask you how to do it, he wants you to finish it, but he also resents that something is not right, it’s not up to his idea))))) ) Which is only in his head .. This is a commercial secret, so that no one could steal the idea ... - Air
  • @Daniel, I very simply explained that I have a background video and text on top of it, the text should be hidden when hiding, and the video should be played further, but you provided the code that I already had and thanks anyway - Viiild
  • @ Dmitriy, it seemed to me that I answered your question "The block is hidden along with the background video and the white background remains, but only the block should be hidden". Is not it so? There is nothing in the question about the text at all))) - Daniel