Modal popup of youtube videos

Help
1

I want to give a smooth user experience by popping video on same page. On the link below

testimonials-section

First video is an attempt to use modal popup and the rest play on second page.

I have added js and css to assets folder

assets/css/modal-videos.css
assets/js/modal-videos.js

for clarity.

Expected result should look close to this link

here is the html code in _includes/body_wrapper.html

        <div class="swiper-slide">
          <div class="testimonials-item">
            <div class="modal-body">
            <a data-target="_blank" data-toggle="modal" href="#Geeks2">
              <img decoding="async" src="assets/images/rahul.png" alt="Rahul Muthiah" >
            </a>
              <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44px" height="34px">
                  <path fill-rule="evenodd" stroke-width="2px" stroke="rgb(0, 0, 0)" fill="rgb(41, 165, 135)" d="M17.360,8.325 C15.490,5.563 11.616,4.762 8.705,6.536 C6.901,7.635 5.815,9.533 5.826,11.567 C5.828,14.854 8.637,17.516 12.101,17.515 C13.290,17.513 14.456,17.192 15.460,16.587 C14.967,17.975 14.049,19.457 12.537,20.942 C11.934,21.533 11.951,22.476 12.574,23.048 C13.198,23.619 14.192,23.604 14.794,23.012 C20.384,17.515 19.658,11.539 17.360,8.333 L17.360,8.325 ZM32.407,8.325 C30.538,5.563 26.663,4.762 23.752,6.536 C21.949,7.635 20.863,9.533 20.873,11.567 C20.875,14.854 23.685,17.516 27.148,17.515 C28.338,17.513 29.503,17.192 30.508,16.587 C30.015,17.975 29.097,19.457 27.585,20.942 C26.982,21.533 26.999,22.476 27.622,23.048 C28.245,23.619 29.239,23.604 29.842,23.012 C35.432,17.515 34.706,11.539 32.407,8.333 L32.407,8.325 Z" />
                </svg>
              </div>
            </div>
            <div class="info">
              <h6 class="name">
                <span>Rahul Muthiah</span>
              </h6>
              <div class="author">
                <span>CEO Company</span>
              </div>
            </div>
            <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
            <div id="Geeks2" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close"
                                    data-dismiss="modal"
                                    aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title">GeeksforGeeks</h4>
                        </div>
                        <div class="modal-body">
                          <iframe id="Geeks3" width="560" height="315" src="https://www.youtube.com/embed/7ic6oOHobWw?si=yJRAAKPEhAQJLBGn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>

assets/js/modal-videos.js

$(document).ready(function () {
    var url = $("#Geeks3").attr('src');
    $("#Geeks2").on('hide.bs.modal', function () {
        $("#Geeks3").attr('src', '');
    });
    $("#Geeks2").on('show.bs.modal', function () {
        $("#Geeks3").attr('src', url);
    });
});

assets/css/modal-videos.css

.bs-example {
    margin: 20px;
}

.modal-content {
    height: 0;
    padding-top: 1px;
    position: relative;
    margin-bottom: -3px;
    padding-bottom: 56.25%;
}

.modal-content iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

I tried but this attempt is a fail fail.

Please suggest the right direction ?

2

I would practice on a simple modal first, get that to work and then work on getting the video to be in the modal, might make it simpler to understand what the issue is.

It looks like you are using jquery, but that shouldn’t be needed, regular js should work now. I would think an AI coding partner or chat gpt would be able to do this no problem. Basically the js just needs to show or hide the modal when you click the button to show it or close it.

1 Like