How Do I Correctly Set defaultViewMode to FIT_WIDTH in View SDK?

[rgrinage_0904]

I have read all of the basic instructions for the View SDK, and I am trying to set my pdf viewer to open documents with the "FIT_WIDTH" defaultViewMode.  I have tried various placements for the setting, and I suspect my syntax is just not correct.  Here is my code:

<div id="adobe-dc-view" style="width:60%;height:600px;padding-top:50px"></div>
	<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
	<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){
		var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://www.shcsfarmington.org/Newsletter_050420.pdf"}},
			metaData:{fileName: "Newsletter_050420.pdf"}
		}, {embedMode: "SIZED_CONTAINER", defaultViewMode: "FIT_WIDTH"});
	});
	</script>

This is my best guess as to the placement and syntax, but it is not working - as you can see at this web page here: https://www.shcsfarmington.org/pdf-view.html 

This is the last hurdle, I believe, in order to get the Adobe viewer embedded the way I would like, so I appreciate any help to accomplish this.  Thanks.

[Shubhanshu Dixit]

It looks like you are trying to use Sized Container Embed Mode. defaultViewMode is not supported in Sized Container.

Maybe you would like to explore other options. https://documentcloud.adobe.com/view-sdk-demo/index.html

[rgrinage_0904]

Thank you for that very correct answer!  I am making progress, but I have one final glitch in my desired solution for this web page.  The perfect configuration of the viewer that I want to use can be seen here:

https://www.shcsfarmington.org/pdf-view.html 

My ideal solution is to open that viewer inside a w3.css "modal" container, so that the viewer appears over the web page where the documents are opened with a click button.  The problem I am having can be seen at this web page:

https://www.shcsfarmington.org/2020/news-test.html 

If you click on the image below "May 4, 2020" the modal element opens just exactly the way I want it to, but the pdf file does not load properly.  Keep in mind that I am using the exact same script syntax for both web pages, the only difference is that on the news-test page it is opening up inside the modal, which to me should make no difference?  Here is the code for reference:

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
	<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){
		var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://www.shcsfarmington.org/Newsletter_050420.pdf"}},
			metaData:{fileName: "Newsletter_050420.pdf"}
		}, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
	});
	</script>

I appreciate any help to find the answer and solution to this pdf loading size problem.  Thanks.