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 para producir un diseño de "imagen en imagen".

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

body, html {
    background-color: gray;
    height: 100%;
}

#videos {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#subscriber {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#publisher {
    position: absolute;
    width: 360px;
    height: 240px;
    bottom: 10px;
    left: 10px;
    z-index: 100;
    border: 3px solid white;
    border-radius: 3px;
}

2. Una vez que hayas guardado el CSS, vuelve a abrir tu índice en dos pestañas distintas del navegador; ahora deberías ver dos secuencias de vídeo, pero una será más pequeña y estará anidada dentro de la secuencia de vídeo más grande.

Si echamos un vistazo al código CSS anterior, podemos ver que lo hemos conseguido ajustando la altura, la anchura y la posición del #publisher div. Este diseño de «imagen en imagen» es muy habitual en los chats de vídeo, pero no dudes en modificar el CSS para jugar con el tamaño y la posición de estos divs tanto como quieras.