Ein wenig CSS-Anpassung

Jetzt haben Sie einen vollständig funktionierenden Client mit Vonage Video. In diesem letzten Schritt werden einige grundlegende CSS-Anpassungen demonstriert, um ein "Bild-im-Bild"-Layout zu erstellen.

1. Öffnen Sie Ihre leere app.css-Datei in Ihrem Code-Editor und fügen Sie den folgenden Code hinzu:

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. Sobald Sie das CSS gespeichert haben, öffnen Sie Ihren Index erneut in zwei separaten Browser-Tabs - Sie sollten nun zwei Videostreams sehen, von denen einer jedoch kleiner ist und in den größeren Videostream eingebettet ist.

Wenn Sie sich das obige CSS ansehen, können Sie sehen, dass wir dies durch Anpassung der Höhe, Breite und Position des #publisher div. Dieses "Bild-im-Bild"-Layout ist eine gängige Praxis in Videochats, aber Sie können das CSS so anpassen, dass Sie mit der Größe und Position dieser Divs spielen können, wie Sie möchten.