CSSのカスタマイズ

この時点で、Vonage Videoを使った完全なクライアントの完成です。この最後のステップでは、基本的なCSSのカスタマイズについて説明します。

1. 空白のapp.cssファイルをコードエディターで開き、以下のコードを追加する：

   widgets.copy

   body, html {
       background-color: gray;
       height: 100%;
   }
   #videos {
       position: relative;
       width: 70%;
       height: 100%;
       float: left;
   }
   #subscriber {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       margin-left: 50px;
       z-index: 10;
   }
   #publisher {
       position: absolute;
       width: 360px;
       height: 240px;
       bottom: 10px;
       left: 10px;
       z-index: 100;
       border: 3px solid white;
       border-radius: 3px;
   }
   #textchat {
       position: relative;
       width: 20%;
       float: right;
       right: 0;
       height: 100%;
       background-color: #333;
   }
   #history {
       width: 100%;
       height: calc(100% - 40px);
       overflow: auto;
   }
   input#msgTxt {
               height: 40px;
               position: absolute;
               bottom: 0;
               width: 100%;
   }
   #history .mine {
       color: #00FF00;
       text-align: right;
       margin-right: 10px;
   }
   #history .theirs {
       color: #00FFFF;
       margin-left: 10px;
   }
   

2. CSSを保存したら、2つの別々のブラウザ・タブでインデックスを再び開いてください - メッセージを送信した人に応じて、メッセージが右か左に固定されているのが見えるはずです。このページは、テキストチャットと同時にビデオチャットができるように設定されています。