angular 에서 youtube 재생하기

컴포넌트에 safe pipe를 사용할 수 있도록 Pipe를 만든다

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

app.module에 SafePipe를 선언해 준다.

생성한 pipe를 module에 포함시켜 준다.

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

html 작성

iframe을 사용 할 때 src에 safe pipe를 사용한다.

<iframe width="100%" height="300" [src]="url | safe"></iframe>

x-frame-options 해결하기

유투브 공유하기 url을 퍼와서 재생하면 x-frame-option to ‘sameorigin’이라는 에러가 발생하게 된다.
여기서 X-Frame-Option이란 http response header의 한 종류로써 자신의 컨텐츠가 ,

이 옵션은 나의 컨텐츠가 다른 사이트에 무단으로 포함되는 것을 막고 다른 사이트를 통해 클릭 공격 등을 시도하는 것을 막을 수 있다.

즉, Youtube가 컨텐츠를 업로드 하는 시점에 x-frame-option을 설정하여 무단으로 퍼갈 수 없도록 하는 것이다.
때문에 Youtube에서 컨텐츠를 가져와 embed 하고 싶은 경우에는 반드시 공유=>퍼가기 를 누르면 나오는 소스코드의 src 부분을
가져와야 한다. 이 url 에 포함된 중간의 embed 라는 문자는 해당 컨텐츠가 다른 사이트 에서도 재생 될 수 있도록 x-frame-option이 지정되어 있기에
퍼가는 것이 가능해 진다.

---