IFrame / Javascript not working in mobile browsers [duplicate]

I have a html page which embeds a pdf in an iframe. The page is deployed as a static site in AWS S3 . (http endpoint)

When the user lands on the page , a modal dialog containing an image is shown. I also need to find the user location of the user. I am extracting user location from the user ip-address.

I store the fetched to AWS DynamoDB by calling AWS lambda function url.

The whole thing is working nicely on desktop browsers. The moment , i try to access from mobile , android or iOS , the page does not load. Just a blank screen.

Couple things that i tried …

iframe source to https endpoint
use embed instead of iframe.

Also , I am using both window.addEventListener(‘DOMContentLoaded’ and document.addEventListener(“DOMContentLoaded”). if this is an issue or i am using it incorrectly.

Really struggling to get this working. Any help / pointer would be helpful Thanks

const myModal = new bootstrap.Modal('#load-modal');

window.addEventListener('DOMContentLoaded', function() {
  myModal.show();
});


document.addEventListener("DOMContentLoaded", function() {
  console.log("Inside addeventlistener")
  // Fetch latitude and longitude based on IP address
  fetch("https://ipapi.co/json")
    .then(response => response.json())
    .then(data => {
      console.log(data.latitude)
      console.log(data.longitude)
      const bdcAPI = `https://api-bdc.net/data/reverse-geocode-client?
                // latitude=${data.latitude}&
                // longitude=${data.longitude}`
      getAPI(bdcAPI)
    })
    .catch(error => {
      console.error("Error fetching IP address:", error);
    });
});

function getAPI(bdcAPI) {
  fetch(bdcAPI)
    .then(response => response.json())
    .then(data => {
      console.log(data.countryName)
      console.log(data.city)

      functionURL(data.continentCode, data.continent, data.countryCode,
        data.countryName, data.principalSubdivisionCode, data.principalSubdivision, data.city, data.locality)
    })
    .catch(error => {
      console.error("Error fetching country and city name", error);
    });
}

function functionURL(continentCode, continent, countryCode, countryName,
  principalSubdivisionCode, principalSubdivision, city, locality) {

  const functionurl = `https://placeholder.lambda-url.ap-south-1.on.aws/?continentCode=${continentCode}&continent=${continent}&countryCode=${countryCode}&countryName=${countryName}&principalSubdivisionCode=${principalSubdivisionCode}&principalSubdivision=${principalSubdivision}&city=${city}&locality=${locality}`

  console.log(functionurl)

  fetch(functionurl)
    .then(response => response.json())
    .then(data => {
      console.log('Location logged successfully!!')
    })
    .catch(error => {
      console.error("Error calling function url:", error);
    });
}

<html>

<head>
  <title> Macleods Journal </title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <script defer src="script.js"></script>

  <link rel="icon" href="data:, ">
</head>

<body>
  <p></p>

  <p class="container text-center fs-4 fw-bold" style="color: #FFFFFF; background-color: #9F232B;">Journal of The Association of Physicians of India (2025)</p>

  <div class="modal fade" id="load-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document" style="width: 70%;height: 70%; max-width: 80%;max-height: 80%;">
      <div class="modal-content">
        <div class="d-flex justify-content-end">
          <button type="button" class="close rounded-2 " data-bs-dismiss="modal" aria-label="Close" style="margin-right: 5px;margin-top: 5px;">
                    X
                  </button>
        </div>
        <div class=" text-center ">
          <img src="advertisment.jpg" class="rounded-20" style="width: 95%;height: 100%; margin-left: 10px;margin-bottom: 10px;margin-right: 10px;"/>
        </div>

      </div>
    </div>
  </div>
  <div class="text-center" style="width: 100%;height: 100%;">
    <iframe class="pdf d-flex justify-content-center"
          style="border-radius:20px;padding:5px;"
          src= "JAPI0844_1st_proof.pdf#zoom=170"
          width="100%"
          height="100%">
      </iframe>
  </div>
</body>

</html>