Help with JavaScript code for modal

Hi,

I have some images, which when you click on them it opens a modal and that modal contains a video. The video is in the form of an iframe to allow videos to play from YouTube.

I have researched and found lots of examples of JavaScript code to help with this problem. However, when I insert the code to my page and tailor it based on my class name it doesn’t work.

I will paste the code here. Any help with how to fix this would be much appreciated.

Thanks!

        <div class="col-lg-6 col-md-6 col-sm-6 portfolio-item">
          <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <i class="fa fa-plus fa-3x"></i>
            </div>
          </div>
            <img class="img-fluid" src="images/image5.jpg" alt="Ali Krieger">
          </a>
            <div class="portfolio-caption">
              <h4>Ali Krieger</h4>
              <p class="text-muted">Orlando Pride, US</p>
            </div>
        </div>

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <div class="lr">
            <div class="rl">
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-12 mx-auto">
              <div class="modal-body">
                <h2 class="text-uppercase">Ali Krieger</h2>
                <p class="item-intro text-muted bigger">Orlando Pride, US</p>
		<iframe width="1050" height="560" src="https://www.youtube.com/embed/dULhJPAZiOs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <p class="modaltext videomargin">Alexandra Blaire Krieger (born July 28, 1984) is an American soccer player and FIFA Women's World Cup champion. Primarily a defender, she is a member of the United States women's national soccer team and currently plays with Orlando Pride of the National Women's Soccer League, the highest division of women's soccer in the United States. She first appeared for the United States national team at the 2008 Four Nations Tournament during a match against Canada on January 16, 2008. She has since made more than 100 total appearances for the team.
                </p>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                  Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<script>
      $('.modal').on('hidden.bs.modal', function (e) {
       e.target.querySelector("iframe").attr("src", $("iframe").attr("src"));
      });
    </script>

Explain what you mean my “doesn’t work”.

Sorry! I mean when I close the modal window the video keeps playing even though I have tried to insert the code to stop the iframe playing when I click away. Thanks!

I don’t see any code where you attempt to stop the video from play on click.
I suggest putting your project on Codepen.io and post a link to it, so we can see all the code you have tried.

Thanks for you help! I was actually able to solve it :slight_smile: