CODEWITHSUNDEEP
angulargoogle-chromeionic-frameworkionic4cross-origin-read-blocking
MDIT
MDIT

Reputation: 1548

Ionic 4 -Angular : Blocked Youtube video “Cross-Origin Read Blocking (CORB)”

In my Ionic4-Angular application, I’m trying to show a youtube video on my Modal page named activity-video.page.html

<video>
    <source [src]="videoURL" />
</video>

My activity-video.page.ts looks like:

videoURL: string;

  constructor(navParams: NavParams, private modalController: ModalController) {
    this.videoURL = navParams.get("videoURL");
  }

No ERRORS but only a message in Chrome DevTools :

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://m.youtube.com/watch?v=fqI-feIYfhY with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I tried running Google Chrome this way: chrome.exe --disable-web-security but doesn't work

I tried a chrome extension to avoid CORB and also tried Chromium but nothing works.

Upvotes: 0

Views: 3789

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

i don't know if this is the full solution but have you tried using the embed url not the watch url:

https://www.youtube.com/embed/fqI-feIYfhY

If that doesn't work I would try using the snippet in share > embed option of the YouTube page, instead of a direct <video> tag:

<iframe width="560" height="315" src="https://www.youtube.com/embed/fqI-feIYfhY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You will need to Google making YouTube video's responsive, it's a solved problem.

Upvotes: 2

Related Questions