Pdf is not loading on mobile broswer

Question

This is my code where in this function showPdf i am displaying the pdf on screen, in desktop version it is working fine but in mobile broswer it is throwing this error -->

jquery.1fc733054ddb2e2fcd4a0f763671047b.js:1483 Failed to load 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' as a plugin, because the frame into which the plugin is loading is sandboxed.

Can anyone please help?

function showPdf(pageUrl) {
  console.log("pdf url", pageUrl)
  var windowWidth = window.matchMedia("(max-width: 1100px)")

  const actualUrl = originUrl + window.location.href.split(homeUrl)[1];
  document.getElementById('pdf-close-block').innerHTML = '';
  document.getElementById('pdf-close-block').innerHTML = '<a class="close__pdf" onclick="addTime(\'' + actualUrl + '\')">Close PDF</a> download';
  document.getElementById('pdf-close-block').style.display = 'block';
  document.getElementById('time-block').innerHTML = '';

  // Check if it's a mobile device
  if (windowWidth.matches) {
    // For mobile devices, use <embed> instead of <iframe>
    document.getElementById('time-block').innerHTML = '<embed src="' + pageUrl + '" width="100%" height="1000px">';
  } else {
    // For desktop or larger screens, continue using <iframe>
    document.getElementById('time-block').innerHTML = '<iframe src="' + pageUrl + '" width="95vw" height="auto"  frameBorder="0" class="page__frame" style="margin-top: 40px;"></iframe>';
  }
  if (document.getElementsByClassName("page__frame")[0]) {
    //document.getElementsByClassName("page__frame")[0].scrollIntoView();
    $('#first_col_1')[0].scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    $('#parent-column')[0].scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    $('#iframe-wrap')[0].scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }



}

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