Un poco de personalización CSS

En este punto, ya tienes un cliente completo que funciona con Vonage Video. Este último paso demostrará algunas personalizaciones básicas de CSS.

1. Abre tu archivo app.css en blanco en tu editor de código y añádele el siguiente código:

   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. Una vez que hayas guardado el CSS, vuelve a abrir tu índice en dos pestañas separadas del navegador - ahora deberías ver los mensajes fijados a la derecha o a la izquierda dependiendo de quién los envió. La página está configurada para permitir el chat de vídeo junto con el chat de texto.