ZoomのYouTubeライブ配信用ページの作り方

はじめに

今回は、Zoomは、YouTubeに映像を流して、ライブ配信する機能があります。
しかしある特定に方に見てもらうために限定公開している方にとって、こんな問題があるかもしれません。

  • 広告が色々と表示される。
  • 関連動画が表示されてしまう。
  • 操作によってYouTubeへアクセスしてしまう。

今回はそれを解決して、使って快適に視聴できるWebページの作り方を紹介したいと思います。
(ZoomとYouTubeの連携については、ググったら沢山情報が出てくるので、当ページでは取り上げません。ごめんなさい。)

Webページの作り方

1.下記のコードをメモ帳にコピペしてください。

<html>
  <head>
    <meta charset="utf-8">
    <style>
    .responsive_video { 
        position: relative; 
        padding-bottom: 56.25%; 
    }
    .responsive_video video, 
    .responsive_video iframe, 
    .responsive_video object, 
    .responsive_video embed { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }
    #overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:20%;
    z-index:50;
}
    </style>
  </head>
  <body>
    <div class="responsive_video">
        <iframe src="https://www.youtube.com/embed/XXXXXXXXXXX?modestbranding=1&autoplay=1&rel=0&wmode=opaque" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div id="overlay"></div>
    </div>
  </body>
</html>

2.「iframe src="https://www.youtube.com/・・・」と書かれている部分を自分の環境によって修正しましょう。

設定値説明
XXXXXXXXXXX公開したいYoutube動画のID
modestbranding=1YouTube ロゴを非表示にする。
autoplay=1動画の自動再生。
rel=0関連動画の非表示。
wmode=opaque" frameborder="0″ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"不要な部分をクリック出来ないようにするための設定。
allowfullscreen全画面表示

3.適当な名前で保存しましょう。(例:YoutubePlay.html)

4.作ったファイルを公開したいWebサーバにコピーしたら完了です。

<おまけ>
公開するウェブサーバをレンタルするとお金もかかるし大変ですよね。少し制限はありますが「KISSr」がとても便利です。
「KISSr」はDropBoxと連携していて、DropBoxにファイルをコピーすれば、自動的に公開されるので、難しい色々な知識は不要です。詳しくはググってみてくださいね。

まとめ

いかがだったでしょうか?通信回線の悪いところでも、Googleの通信のアルゴリズムでYoutubeは快適に見えたりするんですよね。なのでYoutubeを上手く利用出来れば、10秒程度は遅れますが、ほぼリアルタイムで配信が出来てしまいます。
もしよかったら、この情報をご活用くださいませ。