YouTubeの動画を同時再生

使い方

まずは動画IDをクリップボードにコピーします。
動画ID？何それ？と思った方、今から説明するので安心してください。

動画IDとは、YouTubeの動画のURLの最後にある謎の文字列のことです。
例えば、こんな感じの動画URLがあります。

DECO*27 - ヒバナ feat. 初音ミク
https://www.youtube.com/watch?v=hxSg2Ioz3LM

このURLの動画IDは「hxSg2Ioz3LM」です。
URLの形式は「https://www.youtube.com/watch?v=ここが動画ID」なので、
この「v=」以降を抜き出すと動画IDがわかります。

そしたら、この動画IDをコピーしておいてください。

そしたら、このサイトに動画を追加していきます。

下の方にスクロールすると、「追加したい動画のID」と書かれたボックスがあると思います。
そこを押して、先ほどコピーしたIDを貼り付けてください。

貼り付けができたら、隣にある「動画を追加」ボタンを押してください。
すると、デフォルトで入っている動画の下に、入力した動画IDの動画が追加されると思います。

そしたら次は、同時再生したいもう一つの動画も追加していきます。
といっても、上の2つの手順を繰り返すだけです。

まずは動画IDをコピーします。
同時再生したい動画をYouTubeで開き、URLのv=以降の部分をコピーしてください。

次に、このサイトに動画を追加します。
下にスクロールして、「追加したい動画のID」ボックスに動画IDを貼り付けて、
隣にある「動画を追加」ボタンを押してください。

ここまできたらあとは簡単です。
先ほど入力したボックスの下に、「再生」と書かれたボタンがあると思います。
このボタンを押すと、追加した二つの動画が同時に再生されます。

ちなみに、再生ボタンの隣にある「停止」を押すと一時停止ができます。
また、シークバーをいじると再生位置を変更できます。

このサイトでは、普通の動画だけではなくライブ配信も再生できます。
そんな感じなので、一応ライブ配信の複窓もできます。

ただ、できるのは再生だけです。
以下のことはできません。

要するに、複窓するなら専用の複窓ツール使ったほうがいいってことです(

技術的な話わかる人向け

改善案などがあれば連絡くれると嬉しいです。

このサイトは、ソースコードをGitHubで公開しています。
ここで何かしらやってくれると喜びます。

以下の内容は、改善したいけど作者の技量不足によりできないことです。
詳しくはIssueを見てみてください。

もし上の問題の解決策を知っている方がいれば、ぜひGitHubで連絡ください（SNS系やってない）

ちなみにこのサイトで使っている技術は、HTML/CSS, JavaScriptのみです。
どれもフレームワークやライブラリ等は使わずに書いてます。
それどころかnpmやyarnすら使ってません。
Jestなんかもないので、テストコードもありません。

サイトの仕様的にReact使ったらいい感じになりそうだと思ってはいますが、
Reactでの開発はやったことないので躊躇しているのが現状です。

そもそもフロントエンドの経験がほぼなく、何していいのかよくわかってません。
そんな感じなので、上の話が少しでも分かった方、ぜひ連絡ください。
お願いします。