Question 208292 in Html Question posted in
Some basic documentation can be found here.

how can I make a video pop up when I click the button(html)

I’m an absolute begginer in html, css and js. And I want a video to pop up when I click a button and disappear when I click the button again. I’ve tried to found a video in korean but there aren’t any videos about it. How can I make this?

Tags:

2

Answers


  1. 0

    It’s possible with Bootstrap 5:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Modal Example</h3>
  <p>Click on the button to open the modal.</p>
  
  <!-- This button toggles the modal; chage "Open modal" to your own text you want on button -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header; replace "Modal Heading" with your own heading -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body; replace "Insert video here..." with your video element -->
      <div class="modal-body">
        Insert video here...
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>


</body>
</html>

    If you want to learn more about modals and their customization, check this out.

    Hope this helps!

    Login or Signup to reply.
  2. 0

    First, add class .hide in css and set visibility: hidden;

    .hide {
visibility: hidden;
}

    this will hide anything that you assign class "hide" to.
    Now we grab the button element with query selector and add eventListener to it. If you dont know what those are, document.querySelector('') grabs the first element in html with the name 'elementname' for element, '.classname' for class and '#idname' for id. More about that here.

    Lets say our button has id="removeVid"

    document.querySelector('#removeVid').addEventListener('click', function () {
  // code here
});

    As you can see I also added addEventListener(), which you can check out here.

    I’ll now declare a variable videoHidden = false, that we will change when we show/hide it.

    After that, I’ll make an if else statement that will give class hide to video if its not hidden yet, and remove class hide if it is hidden.

    let videoHidden = false;

document.querySelector('removeVid').addEventListener('click', function() {

  if (videoHidden === false) {
  
  // adds class ".hide" to the video
    document.querySelector('video').classList.add('hide');
    
    videoHidden = true; // now it knows video is hidden
    
  } else {
  
  // removes class ".hide" from the video
    document.querySelector('video').classList.remove('hide');
    
    videoHidden = false; // and now it knows it isn't hidden anymore
  }

})

    Hope this helped and feel free to ask questions if anything is unclear.

    EDIT: If you want it to be hidden at first, add class .hide to the video in html :).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search