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 separadas 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 echas un vistazo al CSS anterior, verás que lo hemos conseguido ajustando la altura, la anchura y la posición de la etiqueta #publisher div. Este diseño de "imagen en imagen" es una práctica común en los chats de vídeo, pero siéntete libre de ajustar el CSS para jugar con el tamaño y la posición de estos divs tanto como quieras.