Google drive link pdf not opening in modal

[ajoy123rocks]

<button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" data-toggle="modal" data-target="#videoModal" data-video="https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing"> Watch&nbsp;<i class="fa fa-file-pdf-o" aria-hidden="true"></i></button>

                 <!-- Modal -->
                 <div class="modal fade" id="videoModal" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                      <div class="modal-content">
                          <div class="modal-header bg-dark border-dark">
                              <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                          </div>
                          <div class="modal-body bg-dark p-0">
                              <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" allowfullscreen></iframe>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
    <script>
      $(document).ready(function() {
          // Set iframe attributes when the show instance method is called
          $("#videoModal").on("show.bs.modal", function(event) {
              let button = $(event.relatedTarget); // Button that triggered the modal
              let url = button.data("video");      // Extract url from data-video attribute
              console.log(url)
              $(this).find("iframe").attr({
                  src : url,
                  allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              });
          });
      
          // Remove iframe attributes when the modal has finished being hidden from the user
          $("#videoModal").on("hidden.bs.modal", function() {
              $("#videoModal iframe").removeAttr("src allow");
          });
      });
    </script>

The link "https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing" is opening via browser but shows "Forbidden Error 403" when opened via modal

[Ingolme]

It looks like Google Drive has iframe protection. The page is not allowed to be opened inside a frame.

[ajoy123rocks]

Ok sir...How can i workaround to get the pdf get displayed in the modal?

[Ingolme]

You can have the PDF document hosted in the same server as the web page.

[ajoy123rocks]

Sir... I currently am building the webpage and have still not hosted it on any server. In this scenario how can i load the above pdf in a modal?

[Ingolme]

If the HTML file is on your own computer you can put the PDF file in the same folder as the HTML file and then use the PDF's filename as its URL in your code.

[ajoy123rocks]

I tried it. The modal opens but the pdf does not open in the modal. It opens a dialog asking me to save the file.

<button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" data-toggle="modal" data-target="#videoModal" data-video="Fiba-Assist-Coaches-Offense.pdf"> Watch&nbsp;<i class="fa fa-file-pdf-o" aria-hidden="true"></i></button>