Getting SecurityError from youtube API

I am trying to deploy the directive on an https site and I'm getting the following error in the console when the page loads:

SecurityError (DOM Exception 18): Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://my.miraclemessages.org". Protocols, domains, and ports must match

The play still works on desktop but when i move it over to check on mobile it causes errors on the page that causes the rest of the application to error. Any ideas on how to properly implement this on an https site?

Start by reproducing the directive on an HTTPS page and on mobile, then inspect the YouTube player entry point where the browser reports the cross-origin SecurityError. Use the console error and the difference between desktop and mobile behavior to determine the affected path. Done means the player works on HTTPS and mobile without causing the surrounding application to error.

Written by the indexing model from the issue text.