S3 wordpress iframe questions on full screen option and video skin options

It seems the full screen option in the video skin is non-responsive and not sure how to set this up so it works.

Also, no matter which video skin I select, I am only seeing a skin of not my choice.

I created a short multi-device captivate project and published it to devices. CP 2017. Within the document are a few video's included Media | Video | Event Video | On your Computer | then browsing to file to include on the stage.

The preview has both problems mentioned above, funky standard video skin and full screen button doesn't work

the video files are short mp4 files at 1024x768 size and I'm using Final Cut Pro to create the files in H.264 mpeg-4 format

I then move the files to Amazon's AWS S3 into a bucket.

Within Wordpress I then use an iFrame to call the index.html file from the published CP set of files.

<iframe src="https://s3-us-west-2.amazonaws.com/accendo-courses/spc-process-capability/AccendoCourseTest/index.html" width="1024" height="662"></iframe>

You can see the results at

http://accendoreliability.com/s02-introduction/

Definitely not polished up, yet the issues show the video skin remains some default value and the full screen option button on the right of skin doesn't do anything.

There is a lot I don't know about this setup or what or what should or should not be done... rather confused at this stage on how to get a working operation of the CP lesson displayed on the Wordpess site.

Ideas or suggestions on the skin bar selection and/or the full screen option working?

Or, even better, what is the right way to host the CP files on AWS S3 or Cloudfront, and only display the files to my students on the wordpress based site?

Thanks!

Fred

PS: I do not have the option to add Wordpess plugins given the setup of the site and hosting.