# bubble内で動画の埋め込みができない

**URL:** https://www.nocode-faq.com/t/topic/3635
**Category:** bubble
**Created:** [2023 年 5 月 22 日午後 1:02 UTC](https://www.nocode-faq.com/t/topic/3635 "2023-05-22T13:02:51Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 5 月 22 日午後 1:02 UTC](https://www.nocode-faq.com/t/topic/3635/1 "2023-05-22T13:02:51Z")

</div>

bubbleにて動画を埋め込みたいのですが、配置した動画のエレメントが真っ黒になってしまい動画を表示できません、助けてください。

現状として試行したのは以下の通りです。

①image、video、プラグインのvideo jsにてトライ、すべて真っ黒  
②動画がおかしいのかと思い他の動画で試したが改善せず  
③容量かと思い動画を圧縮、軽量にしたが改善せず  
④ファイルのフォーマットが間違ってるのかと思い確認、mp4で異常なし  
⑤サイズや、ページのnew responsiveの有無を変えたが改善せず

何がおかしいのでしょうか？？どなたか助けてください、、

---

<div class="post-metadata">

### Author: ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)
#### Post date: [2023 年 5 月 26 日午前 11:45 UTC](https://www.nocode-faq.com/t/topic/3635/2 "2023-05-26T11:45:14Z")

</div>

video js のStaticfileにいれて表示されてないということですかね？

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f2bffdfa697d6f316365e3731d8088ace2564cce.png)

基本mp4なら対応しているはずですが、以下の方法試してみてください

# 【Bubble】動画を埋め込める無料プラグイン「video.js」を紹介

> **[【Bubble】動画を埋め込める無料プラグイン「video.js」を紹介 | ALIS](https://alis.to/HMDKN/articles/aple0rdQw8g5)**
>
> ALISは記事の作成やいいねで人気NFTやトークンがもらえるソーシャルメディアです。はじめてブロックチェーンを利用する方も無料で気軽に楽しめます。

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 5 月 27 日午前 5:15 UTC](https://www.nocode-faq.com/t/topic/3635/3 "2023-05-27T05:15:58Z")

</div>

はい、スタティックの方に入れてもダイナミックの方に入れても真っ黒です、、、

何が原因でしょうか？？？

---

<div class="post-metadata">

### Author: ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)
#### Post date: [2023 年 5 月 27 日午前 11:11 UTC](https://www.nocode-faq.com/t/topic/3635/4 "2023-05-27T11:11:28Z")

</div>

うーん、いま調べた感じは、よくわからないです。  
私の方では普通にアップロードできます。

同様の質問も回答がついてないようですので、同じような方もいるみたいです。

> **[Why is video.js player pro plugin not working?](https://forum.bubble.io/t/why-is-video-js-player-pro-plugin-not-working/222149)**
>
> Video.Js Player Pro Plugin I uploaded the video and put a youtube link but this plugin is not working.

HelpDeskも対応してくれるような感じではないので、Vimeoなどの別のプラグインで試すのはどうでしょう？ 回答になってなくて申し訳ないです。

【参考】 [Bubble で Vimeo のビデオを管理できるプラグイン「Vimeo Connector (access token)」を作成しました！](https://blog.nocodelab.jp/entry/vimeo-connector-plugin-j)  
[https://blog.nocodelab.jp/entry/vimeo-connector-plugin-j](https://blog.nocodelab.jp/entry/vimeo-connector-plugin-j)

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 5 月 28 日午前 9:52 UTC](https://www.nocode-faq.com/t/topic/3635/5 "2023-05-28T09:52:20Z")

</div>

なるほどです、、、頂いた投稿に従ってやってみましたが、YouTube動画も真っ黒でした。。。

vimeo、試してみます。

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 5 月 28 日午前 10:03 UTC](https://www.nocode-faq.com/t/topic/3635/6 "2023-05-28T10:03:49Z")

</div>

今見ると、プラグインの詳細も若干違うように思います、もしかしてプラグインが変わってしまったのでしょうか？？

①プラグインページにおけるプラグインのアイコン、説明文、②Design画面におけるvideojsの名前、アイコンも若干違いますし、③エレメントとして画面上に配置したときのプロパティの中身も若干違います。。

一枚目、二枚目は私の画面です、三枚目、四枚目はツバサさんに紹介してもらった投稿に掲載されていた画像です。

 ![スクリーンショット (231)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/88aa94d9e44d04c7ad846eae71a82b5fb05efdb2.png)

 ![スクリーンショット (230)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/cce7b5704b0152990965890801b68a2ea36684d1.png)

 ![スクリーンショット (232)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/58f91d050a5170c65cc7fb8ce2b02986951aef8a.jpeg)

 ![スクリーンショット (233)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/bb78db226ce771c1a6f305e616407ef7adfccc7f.jpeg)

---

<div class="post-metadata">

### Author: ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)
#### Post date: [2023 年 5 月 28 日午後 1:02 UTC](https://www.nocode-faq.com/t/topic/3635/7 "2023-05-28T13:02:29Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/3d0aba75b719e7649c3a96f4b0da190ede216c26.png)

詳細は、確かに変わってますね。ただ、私のインストールしたアプリは、macchiさんと同じなので、使えると思うんですけど。。うーん原因わからないです。

ちなみに、こちら、私のスクリーンショットになります。

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 5 月 30 日午前 4:32 UTC](https://www.nocode-faq.com/t/topic/3635/8 "2023-05-30T04:32:44Z")

</div>

確かにそうですね、、、

他のエンジニアさんにも聞いてみます、ありがとうございます、、

---

<div class="post-metadata">

### Author: ![NoCodeNinja](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nocodeninja/32/2115_2.png) [@NoCodeNinja](https://www.nocode-faq.com/u/NoCodeNinja)
#### Post date: [2023 年 5 月 30 日午前 5:10 UTC](https://www.nocode-faq.com/t/topic/3635/9 "2023-05-30T05:10:28Z")

</div>

Ninjaも試してみましたが、普通にアップロード＆再生ができます。  
謎ですね。。エディタ変えてみても同じですか？

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/505d2f3c191f4a40f985d89e38e7b09a969e00b3.png)

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 6 月 2 日午前 11:35 UTC](https://www.nocode-faq.com/t/topic/3635/10 "2023-06-02T11:35:19Z")

</div>

いろいろやってみましたが、同じアカウントから作成した別のアプリ上ではできました。

また、動画を埋め込みたいページとは別のページを作ってjsを配置してみると、なんと再生できました。

再生したいページと、再生可能な別ページ間で、コピペをしてjsエレメントを交互に輸送してみましたが、再生できないページに入るとコピペした同じエレメントでも再生できなくなり、逆に再生できないページのjsエレメントを再生可能なページにコピペすると再生できるようになります。

再生できないページには複数のテキストやボタンなどが配置されているため、何かのエレメントが邪魔をしていると仮定して、他のエレメントを消しながらテストしてみたいと思います。。。

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 6 月 2 日午前 11:39 UTC](https://www.nocode-faq.com/t/topic/3635/11 "2023-06-02T11:39:49Z")

</div>

周りにある余計なエレメントを削除すると、なんと再生できるようになりました。。。。

特定のテキストを消したからなのか、他のエレメントを消したからなのか、はたまたページ内のエレメント数が規定値を下回ったからなのか、、、真相は不明ですが、再生不可能になる条件をいろいろと探ってみたいと思います。。。

---

<div class="post-metadata">

### Author: ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)
#### Post date: [2023 年 6 月 2 日午前 11:43 UTC](https://www.nocode-faq.com/t/topic/3635/12 "2023-06-02T11:43:03Z")

</div>

再生できなかったページですが、jsを2つ配置しほかのエレメントを全削除すると1つだけが再生可能になり、もう1つは再生ボタンが表示されたものの再生不可です、、、

再生可能なページは3つ配置しても再生可能で、テキストやボタンを大量に配置しても再生不能にはなりません、、、いよいよ条件がわからなくて混乱しています。。。

---

<div class="post-metadata">

### Author: ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)
#### Post date: [2023 年 6 月 2 日午後 6:06 UTC](https://www.nocode-faq.com/t/topic/3635/13 "2023-06-02T18:06:01Z")

</div>

どのようなjsなのかわかりませんが、それぞれの中で変数をconst定義しているのでは？  
１画面内に１つのみ配置する前提で開発されたものなのではないでしょうか？
