I am trying to use the new you tube component from angular. This is the first time I am using it. I referred this article and also the original code for the component.
In my index.html I have:
<script src="https://www.youtube.com/iframe_api"></script>
I have imported:
import { YouTubePlayerModule } from '@angular/youtube-player';
and in my component:
<youtube-player videoId="'exAB088mOok'" suggestedQuality="highres" [height]="300" [width]="500" [startSeconds]="43" [endSeconds]="60">
</youtube-player>
Although I can see the youtube iframe loaded in my component, it doesn't work and says:
An error occurred. Please try again later. (Playback ID: rGdhOrRkDSd_2vzB)
Learn More
In my console I receive the following error:
www-widgetapi.js:613 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:4200').
I have tried looking up for the issue but couldn't find a solution. Most solution says its a mixed content issue between https:// and http://. However, I already have https:// script loaded in index.html
Also the target page doesn't match recipient page is ambigious. I believe target page is youtube URL and recepient page is my application URL. How are they suppose to ever match.
Perhaps I am arriving at something wrong here. Can someone explain whats going on here and provide a solution.
P.S: I have already seen this one, but it doesn't help me.
