ZoomのYouTubeライブ配信用ページの作り方（接続者情報表示機能）

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

はじめに

前回、YouTubeの映像を自分のWebページに張り付ける方法を取り上げました。

はじめに今回は、Zoomは、YouTubeに映像を流して、ライブ配信する機能があります。しかしある特定に方に見てもらうために限定公開している方にとって、こんな問題があるかもしれません。広告が色々と表示される。関連動画が表示されてしまう。操作...

今回は、それだけだと少し寂しいので、自分のIPなどの接続情報を表示して確認出来る機能を追加したいと思います。
難しく思うのですが、「ipinfo.io」という無料のWebAPIで解決出来るので簡単なんです。

では早速行ってみましょう。

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>
    <table>
        <tr><th>Platform</th><td><a class="platform"></a></td ></tr >
        <tr><th>UserAgent</th><td><a class="userAgent"></a></td ></tr >
        <tr><th>IP</th><td><a class="ip-address"></a></td ></tr >
        <tr><th>Country</th><td><a class="country"></a></td ></tr >
        <tr><th>Region</th><td><a class="region"></a></td ></tr >
        <tr><th>City</th><td><a class="city"></a></td ></tr >
        <tr><th>Location</th><td><a class="location"></a></td ></tr >
    </table >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">

        $(".platform").text(navigator.platform);
        $(".userAgent").text(navigator.userAgent);

        $.ajax({
            url: "https://ipinfo.io",
            dataType: "jsonp",
            success: function(res){
                 $(".ip-address").text(res.ip);
                 $(".country").text(res.country);
                 $(".region").text(res.region);
                 $(".city").text(res.city);
                 $(".location").text(res.loc);
            }
        });
    </script>
  </body>
</html>