PDF Embed API Rendering Blank

Hi, I am by no means well versed in coding and have a rudimentary understanding of some very basic things that are needed to accomplish things on my website built through Squarespace. I tackle projects on a case by case basis and usually rely on all of the information available online to get something done.

Today I attempted to embed a PDF file on my website. I finally figure out how to host the file on my website and copy the code from the Adobe PDF Embed API Demo, while replacing the Client ID, url & Filename in the code. The final result is that my file is rendering as blank space on the webpage on which I've tried to embed it. It says "Loading Document" and then loads as blank.

How do I fix this?

Here is the code I used:

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "<1667f435c7a74986ac7722cbf011e299>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://www.prindablesettlements.com/s/Past_Present_Future_Website.pdf"}},
metaData:{fileName: "Past_Present_Future_Website.pdf"}
}, {embedMode: "IN_LINE"});
});
</script>

Many thanks in advance!