What is the procedure to enable closing of my Bootstrap 4 popup by pressing the "Esc" key on my keyboard, given that the popup contains a YouTube video embedded as an iframe in the paused state?

edit

1. Set up your HTML code for the popup with the embedded YouTube video.

2. Add an ID to your popup container element, e.g. id="myModal".

3. Create a JavaScript function to detect when the "Esc" key is pressed:

   function closeModal(e) {
    if (e.key === "Escape") {
      $("#myModal").modal("hide");
    }
   }
   

   This function uses jQuery to hide the modal when the "Esc" key is pressed.

4. Bind the function to the "keyup" event of the document:

   $(document).keyup(closeModal);
   

   This will listen for the "keyup" event on the entire document, and call the closeModal function when the "Esc" key is pressed.

5. Make sure the YouTube iframe is set to paused when the modal is opened:

   $("#myModal").on("shown.bs.modal", function () {
    $("iframe").each(function () {
      this.contentWindow.postMessage(
        '{"event":"command","func":"pauseVideo","args":""}',
        "*"
      );
    });
   });
   

   This uses the "shown.bs.modal" event to loop through all iframes in the modal and pause any YouTube videos they contain.

6. Finally, add the "allowfullscreen" attribute to the iframe to enable full-screen mode:

   <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    allowfullscreen
   ></iframe>
   

   This will allow the user to click the full-screen button on the YouTube video.

Your Bootstrap 4 popup should now close when the "Esc" key is pressed, and the embedded YouTube video should be paused when the modal is opened.