【rails入門】youtube埋め込み

# やりたいこと
特定のyoutube動画をrailsアプリケーションで表示したい

# まずは埋め込み方法
埋め込みたいyoutube動画を再生して右クリックで`埋め込みコードをコピー`をクリックします！
> [W/X/Y - Tani Yuuki (Official Lyric Video)](https://youtu.be/mp2-w15SXms)
![スクリーンショット 2022-05-16 14.06.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/29e242dc-63ca-3125-6dfb-e22bcd22ac44.png)


そして`ctrl + v`でペーストすると↓のようになると思います。
（ペーストする場所は表示したい場所）
```html:index.html
<iframe width="1190" height="669" src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
今こんな感じ↓
![スクリーンショット 2022-05-16 14.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/d6aa100b-a651-e0c4-f560-1c8a3745dfa9.png)


`height`と`width`と`frameborder`を消して`class="youtube"`を追記して装飾しやすくします↓
(`height`と`width`は高さと横幅、`frameborder`は`0`の時インラインフレームの境界線なし、`1`の時ありです。消す理由はcssでもっと簡単に細かく設定できるからです)
```html:index.html
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```
これでcssで`.youtube{}`で装飾できます！
今回はこんな感じで書いてみました↓
```html:index.html
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms" title="YouTube video player"　allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>

<style>
    .youtube{
        width: 100vw;
        height: 100vh;
    }
</style>
```
`<style></style>`はcss書くよーってことです！（cssファイルに書いても同じです）
![スクリーンショット 2022-05-16 14.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/0a4362e6-d0c8-c231-45f1-730cb01bf7fe.png)

cssが適用されてることが確認できました！
# もうちょっと細かく設定したい！！
ここまでで一応表示はできましたが、ちょっとイマイチですね、、、（cssをもっとちゃんと書けば良くなるとは思いますがw）
ここからはペーストした`iframe`の中身を細かくみていきましょう！！
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```
属性？要素？よくわかりませんが、こんな感じですね
1. `src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms"`
1. `title="YouTube video player"`
1. `allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"`
1. `allowfullscreen`
1. `class="youtube"`(追加したやつ)

### 1. `src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms"`
予想がつく人が多いと思いますが、**URL**ですね！しかし**webサイト上で表示されているものとは違います**

`https://www.youtube.com/watch?v=mp2-w15SXms` (webサイト上で表示されているURL)
`https://www.youtube.com/embed/mp2-w15SXms` (埋め込みコード内でのURL)
`https://youtu.be/mp2-w15SXms` (ついでに共有用のURL)
![スクリーンショット 2022-05-16 15.03.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/6bede519-ecde-51bf-d46b-fbd9bd04ff48.png)

何となくわかりますか？

ちなみに他のyoutubeならこんな感じです（[King Gnu - カメレオン](https://youtu.be/BOrdMrh4uKg)）

`https://www.youtube.com/watch?v=BOrdMrh4uKg`
`https://www.youtube.com/embed/BOrdMrh4uKg`
`https://youtu.be/BOrdMrh4uKg`

大事なのは**URLの後ろ11文字**です！ここさえわかってしまえば、youtube投稿もできそうですね！
つまりyoutube埋め込みをしたい時のURLは`https://www.youtube.com/embed/(後ろ11文字変更)`のようにすれば良いことがわかります！


### 2. `title="YouTube video player"`
タイトルです
とりあえず書いておきましょう

### 3. `allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"`

youtube埋め込み長いのが多いですが、これはただのallow属性です！
APIの機能を有効化や無効化するための属性なので、いろいろ許可しているだけです
* accelerometer
    * 端末の加速度に関する情報を収集する機能
* autoplay
    * 自動再生
* clipboard-write
    * クリップボードの操作
* encrypted-media
    * Encrypted Media Extensions API (EME) の使用
* gyroscope
    * 端末の方向に関する情報を収集する機能
* picture-in-picture
    * Picture-in-Pictureモードで動画を再生する機能

よくわかりませんが、許可をしてるだけです！**実際に変更する時には特にいじる必要はありません**

### 4. `allowfullscreen`
全画面モードにすることを許可する

# 実際に設定していきましょー！！
ここまでで`iframe`の中身はかなりわかるようになったのではないでしょうか？

ここからは、実際にどのように埋め込まれたyoutubeをカスタマイズするのか、どんなカスタマイズができるのか
見ていきましょう！！

結論から言うと埋め込みリンクに追記していきます！
`src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms(ここに追記)"`
なので、いくつかカスタマイズしていくと
```
src="https://www.youtube.com/embed/mp2-w15SXms?list=RDmp2-w15SXms?~~~~&~~~~&~~~~~"
```
みたいな感じになります
(追記する箇所の先頭は`?`それ以降追加していくときは`&`でつなぐ)

#### 1. 自動再生
`autoplay=1`
```html:index.html
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?autoplay=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```
ここであれ？自動再生されないと思った方へ
ミュート設定をしないと自動再生はされません
なのでさらに追記していきましょう
`mute=1`
合わせてこんな感じ
`autoplay=1&mute=1`
```html:index.html
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?autoplay=1&mute=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```
これで自動再生されると思います！

#### 2. 動画の下部に再生/停止や再生位置、音量などの設定の表示設定
`controls=0`　->　表示しない
設定なし　->　表示する
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

#### 3. ループ再生
`loop=1&playlist=<youtube_id>, <youtube_id>, <youtube_id>, ・・・`
`youtube_id`には次に再生したい動画のidを記入しましょう！
ループしたい場合は同じidを2回書くことになります！↓
`src="~~/<同じid>?loop=1&playlist=<同じid>"`
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?loop=1&playlist=mp2-w15SXms" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

### 4. 再生位置指定
`start=<数字>&end=<数字>`
`start=10&end=30`こんな感じにしたら10秒〜30秒を再生します
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?start=10&end=30" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

### 5. android派歓喜?
iOSのSafariでYouTubeの埋め込み動画を再生すると自動的に全画面表示へと切り替わるのを防ぐ
`playsinline=1`
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?playsinline=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

### 6. YouTubeロゴの非表示
`modestbranding=1`
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?modestbranding=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```
![スクリーンショット 2022-05-23 1.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/04d03b6f-90d9-9945-e32e-df4d34dd426f.png)
![スクリーンショット 2022-05-23 1.21.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/5da64e35-6a3e-1f25-3420-f94391460213.png)

### 7. キーボード操作の無効化
`disablekb=1`
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?disablekb=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

### 8. 字幕の表示
`cc_load_policy=1`
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?cc_load_policy=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

### 9. 字幕の言語指定
`cc_lang_pref=ja`日本語
`cc_lang_pref=ja`英語
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?cc_lang_pref=ja" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

###10. 関連動画の非表示
`rel=0`
他チャンネルの関連動画は表示されなくなるのですが、マイチャンネルにアップした動画が、関連動画として表示されてしまう
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?rel=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

### 11. シークバーの色変更
`color=white`
```
<iframe src="https://www.youtube.com/embed/mp2-w15SXms?color=white" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>
```

# 応用編！
youtube埋め込みを使ってサイトの背景動画を作ります
<br>
、、、と思ったのですが、残念ながらガイドライン違反のようです:scream:
[**YouTube API Services - Required Minimum Functionality**](https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames)
詳しくは↑に書いていますが、YouTube動画プレーヤーの上に何か要素を重ねてはならないようです:no_good_tone2:


# 最後に
実は裏テーマ「僕の普段見てるyoutube宣伝してみた」でした、、、
またね！