Display a pop-up video player when a button is clicked to watch multiple videos on a webpage utilizing jQuery/Javascript

Question

Display a pop-up video player when a button is clicked to watch multiple videos on a webpage utilizing jQuery/Javascript

I am in need of assistance with integrating multiple embedded YouTube videos (using iframes) that appear on the screen after a user clicks a custom button.

While there are solutions available for single videos, I am struggling to make it work for multiple videos on the same page.

The button is located within a series of uniform div elements across all the videos. Once the video pops up, clicking outside of it should close the modal.

The following code aims to identify the parent element after the button click and open the corresponding video modal, but unfortunately, nothing happens as expected.

Any guidance or support provided would be highly appreciated!

javascript html jquery css

Answer 1

Answer №1

Initially, the modal and trailerbox variables are not properly defined. Since they are descendants of a sibling element of the button, using .closest() will not locate them.

For each element in the set, find the first element that matches the specified selector by iterating through the element itself and its ancestors in the DOM hierarchy.

As it checks itself first, followed by the parent elements, these entities will not be discovered. To locate them, you should utilize .find() starting from the parent element.

var modal = $(this).closest('.card').find('.trailerdivbox');

Take a look at this example:

$(function() {
  function openVideo(event) {
    var card = $(this).closest(".card");
    var modal = $(".trailerdivbox", card);
    modal.addClass("isOpen").show();
  }

  function closeVideo(event) {
    var modal = $(".trailerdivbox.isOpen");
    modal.removeClass("isOpen").hide();
  }
  
  $(".videos").on("click", ".watchbutton", openVideo);
  $(".videos").on("click", ".close", closeVideo);
  
});

/* Watch Trailer Button CSS */

.watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  padding: 10px 12px;
}

.watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

.trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='videos'>
  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Initially, the modal and trailerbox variables are not properly defined. Since they are descendants of a sibling element of the button, using .closest() will not locate them.

For each element in the set, find the first element that matches the specified selector by iterating through the element itself and its ancestors in the DOM hierarchy.

As it checks itself first, followed by the parent elements, these entities will not be discovered. To locate them, you should utilize .find() starting from the parent element.

var modal = $(this).closest('.card').find('.trailerdivbox');

Take a look at this example:

$(function() {
  function openVideo(event) {
    var card = $(this).closest(".card");
    var modal = $(".trailerdivbox", card);
    modal.addClass("isOpen").show();
  }

  function closeVideo(event) {
    var modal = $(".trailerdivbox.isOpen");
    modal.removeClass("isOpen").hide();
  }
  
  $(".videos").on("click", ".watchbutton", openVideo);
  $(".videos").on("click", ".close", closeVideo);
  
});

/* Watch Trailer Button CSS */

.watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  padding: 10px 12px;
}

.watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

.trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='videos'>
  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Display a pop-up video player when a button is clicked to watch multiple videos on a webpage utilizing jQuery/Javascript

Answer №1

Similar questions

Incorporate smooth transitions into isotope elements

Adjusting Grid Posts to a Consistent Size (Featuring Photo Posts with Captions Below)

JavaScript: Finding the full Base-URL - A Step-by-Step Guide

Repositioning with Flexbox: shifting the middle element to a new line

What are the steps for retrieving a JSON object within an array?

Querying form data in a POST request using node.js and express

Which is the more appropriate option to use in JavaScript: "this" or "event.target"?

Challenge with unstable video streaming from blob in Angular 7

Having trouble getting rounded-lg and rounded-md to work properly with Tailwind CSS - any ideas why?

Testing NodeJS Database Functionality using Mocha and Asserting with should.js

bootstrap class not detected and not visible in Firebug

Guide to implementing a slider in HTML to adjust the size of my canvas brush

Which data type should I utilize to transfer an array of integers using ajax?

Creating Responsive Images with Bootstrap at Specific Breakpoints

Having trouble with @font-face not displaying in my style.css file

Tips for enlarging an image by tapping on it in handlebars

Centering Image and Media Body in Bootstrap's Media Object

Sending information through a form in html to a server via AngularJS Http Post

"Attempting to update the view by calling a controller function from a directive proves ineffective

What is the best way to selectively delete elements in d3.js?