A little bit of CSS customization

At this point, you have a complete working client using Vonage Video. This last step will demonstrate some basic CSS customization.

1. Open up your blank app.css file in your code editor and add the following code to it:

   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. Once you've saved the CSS, reopen your index in two separate browser tabs again — you should now see the messages either being pinned to the right of left depending on who sent it. The page is set up to allow for video chat to happen alongside the text chat.