【CORSエラー】iframeタグでのYouTube動画埋め込み

## はじめに
Next.jsを使用したアプリケーションにYouTube動画を埋め込む方法について調査し、その結果をまとめました。
YouTube以外の動画も埋め込む可能性があったため、汎用的に利用できるiframeタグについてのみ説明します。
また、アプリケーションへ導入時にコンソールにCORSエラーが現れたので、その点についても触れています（本題）。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

https://developers.google.com/youtube/iframe_api_reference?hl=ja

（YouTubeに特化している場合は、react-youtubeなどのライブラリを使用した方がいいかもしれません。）

https://www.npmjs.com/package/react-youtube

## 結論
先に結論を述べておきます。
現時点でのYouTubeのiframe APIに関する**CORSエラーを解消することは難しい**ことが分かりました。
詳細は[CORSエラー](#corsエラー)に記載していますが、YouTube公式サイトでも同様のCORSエラーが表示されているため、根本的な問題の解決は難しそうです。

## 埋め込み方法
以下のコードを動画を埋め込みたいコンポーネントに記載します。
```tsx:page.tsx
<iframe 
        src={URL} // 埋め込む動画のURL
        title={Youtube_Player} // フレームのラベル名
        // ↓ 権限ポリシーの設定
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        width={350} // 横幅:px
        height={200} // 高さ:px
></iframe>
```

## パラメータ
https://developers.google.com/youtube/player_parameters?hl=ja

以下のように`src={URL}`に記載します。パラメータは全て省略可能です。
```tsx
<iframe 
        src={URL + "?playsinline=1&modestbranding=1"}
        title={Youtube_Player}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        width={350}
        height={200}
></iframe>
```
権限ポリシーは以下を参考に設定してください。

https://developer.mozilla.org/ja/docs/Web/HTTP/Permissions_Policy


## 埋め込み用URLの取得方法
`src={URL}`の`URL`取得方法。
以下の２種類の方法が分かりやすいです。（動画、生配信共通）
#### ・ 以下のフォーマットを`URL`に記載する
`https://www.youtube.com/embed/（動画、配信ID）`

#### ・ Youtubeの共有>埋め込む>SRCの部分をコピーして`URL`に貼り付ける
1. 動画右下の「共有」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2145496/239ce64f-8605-1a0b-610b-4fd05f6565f7.png)

2. 「埋め込む」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2145496/09848726-2396-fdde-04c3-f7e05d8647a4.png)

3. iframeタグ内の`src="〇〇"`の`〇〇`の部分をコピーして`URL`に貼り付け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2145496/e326d982-6c42-c788-a748-3295edb97823.png)

## CORSエラー
一部の動画において以下のコンソールエラーが表示される場合がありました。
（↓ 導入したアプリケーションでのコンソール内容）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2145496/69850c52-0f3f-43ee-d7fb-89b0802a09e7.png)

```
Access to XMLHttpRequest at 'https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20231003&foc_id=NTxclE0N4qsUuirssL_D8w&label=followon_view&ptype=no_rmkt&random=637920088&cv_attributed=0' (redirected from 'https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20231003&foc_id=NTxclE0N4qsUuirssL_D8w&label=followon_view&ptype=no_rmkt&random=637920088') from origin 'https://www.youtube.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```
エラー内容としては、CORSエラーのようです。
CORS(Cross-Origin Resource Sharing)については以下の記事が参考になります。

https://qiita.com/att55/items/2154a8aad8bf1409db2b

https://future-architect.github.io/articles/20220222a/

`googleads.g.doubleclick.net`について調べてみると、どうやらGoogleの広告からのトラフィックを示しているようですが、対策については分かりませんでした。

https://support.google.com/analytics/answer/1011829?hl=ja

他にも色々と調べましたが、最終的にはYouTube公式サイトでも同様のCORSエラーが発生することが分かり、現時点では問題の解決が難しいと判断しました。
YouTubeのiframe APIがエラーの解消に向けて修正されるのを待つしかないかもしれません。 

| 導入したアプリケーション | YouTube公式サイト |
|:-:|:-:|
|  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2145496/69850c52-0f3f-43ee-d7fb-89b0802a09e7.png) |  <img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2145496/39e141ed-0e99-495a-86b4-b51914dce930.png"> |

## 参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

https://developers.google.com/youtube/iframe_api_reference?hl=ja

https://developers.google.com/youtube/player_parameters?hl=ja

https://qiita.com/att55/items/2154a8aad8bf1409db2b

https://future-architect.github.io/articles/20220222a/