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

はじめに
Webページの作り方
まとめ

はじめに

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

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

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

Webページの作り方

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

<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>

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

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

３．適当な名前で保存しましょう。（例：YoutubePlay.html）

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

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