PlayCanvasでYouTubeのビデオを埋め込む

## PlayCanvasで2D Screenに YouTubeのビデオを埋め込む
最近、PlayCanvasの2D Screen機能を使用してYouTubeのビデオを埋め込みたいなと思うことが多かったので、YouTubeの埋め込み機能をPlayCanvasで使用するための方法を紹介します。


![](https://i.imgur.com/Z6ym37O.png)
実行結果はこちらになります。  
「Big Buck Bunny」を読み込んでいます。
https://playcanv.as/p/wheFl8iO/

## プロジェクトについて
![](https://i.imgur.com/0OV5teB.png)

今回のプロジェクトのシーンはこちらになります。
https://playcanvas.com/project/725582/
完成したシーンの構成は2D Screenのみを配置しています。

```
-Root
--2D Screen 
```


### シーンを構築する

#### 1. 2D Screenを追加



左上の`HIERARCHY`にある`+`をクリックし、`User Interface` → `2D Screen`を選択してスクリーンを追加します。

#### 2. SCRIPTコンポーネントを追加
![](https://i.imgur.com/6hYndKt.png)

次は、SCRIPTコンポーネントを追加します。
2D Screenを追加した状態でSCRIPTの追加をします。
1. ADD COMPONENTをクリック
2. Scriptコンポーネントを追加

#### 3. プロジェクトにスクリプトを追加する

![](https://i.imgur.com/BsKBpNj.png)

次にスクリプトを追加します。

1. 画面の下にある`ASSETS`を右クリック
2. New AssetからScriptを選択
3. html-element.jsで作成


#### 4. スクリプトを記述

作成した`html-element.js`をクリックし開かれたコードエディタ下記のコードを記述します。
1. スクリプトを記述
2. Ctrl + s(Macの場合はCOMMAND +  s)で保存

```html-element.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
const HtmlElement = pc.createScript('htmlElement');
HtmlElement.attributes.add("embededUrl", {"type": "string", default: "https://www.youtube.com/embed/aqz-KE-bpKQ"});

HtmlElement.prototype.initialize = function() {
  if(this.app.touch){
    this.app.touch.on(pc.EVENT_TOUCHEND, () => {
        this.entity.enabled = false
    })
  }
  this.app.mouse.on(pc.EVENT_MOUSEDOWN, () => {
      this.entity.enabled = false
  })
 
    
  this.once("enable", () => {
      this.show()
  })
  
  this.once("disable",() => {
      this.hide()
  });
    
  this.show()

 };


HtmlElement.prototype.hide = function() {
    document.getElementById("youtube-element").remove();
}

HtmlElement.prototype.show = function() {
    const {x: width, y:height} = this.entity.screen.resolution;
    const style = `
    <style>
    #youtube-element .html-element {
        width: ${width}px;
        height: ${height}px;
        position:absolute;
        display:flex;
        flex: 1;
        background:transparent;
        z-index:5;
        color: #fff;
        justify-content:center;
        align-items:center;
        flex-direction:column;
    };
    </style>`;
    const html =`
    <div id="youtube-element">
        ${style}
        <div class="html-element">
                <h1 class="text">YouTubeビデオ</h1>
                <iframe width=${width  *0.64} height=${width * 0.32} src="${this.embededUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
  `
  const body = document.getElementsByTagName("body")[0]
  body.insertAdjacentHTML("afterbegin", html);
}
```


#### スクリプトをエンテティに適用

![](https://i.imgur.com/AvMU9sQ.png)

`SCRIPT`コンポーネントを追加した2Dスクリーンに、記述したコードを適用します。
1. SCRIPTコンポーネントのADD SCRIPTからhtmlElementを選択
2. Parseボタンをクリック

これでスクリプトの記述ができました。
`embededUrl`にYouTubeの共有→埋め込みを押した際に表示されるリンクを入力することで動画の埋め込みができるようになります。

実行結果: 
https://playcanv.as/p/wheFl8iO/



今回の記事で、意見、質問などが有りましたら [@mxcn3](https://twitter.com/mxcn3)までお願いします。


<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)


</font>

<font color="OrangeRed">
その他関連

- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>

### PlayCanvasのユーザー会のSlackを作りました！

 少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)