CSSのカスタマイズ

この時点で、Vonage Videoを使ったクライアントの完成です。この最後のステップでは、"ピクチャー・イン・ピクチャー "レイアウトを作成するための基本的なCSSカスタマイズについて説明します。

1. 空白のapp.cssファイルをコードエディターで開き、以下のコードを追加する：

2. CSSを保存したら、2つの別々のブラウザ・タブでインデックスを再び開いてください。2つのビデオ・ストリームが表示されるはずですが、1つはより小さく、より大きなビデオ・ストリームの中に入れ子になっています。

上のCSSを見ると、これは #publisher div.この「ピクチャ・イン・ピクチャ」レイアウトは、ビデオチャットでは一般的な方法ですが、CSSを自由に調整して、これらのdivのサイズや位置を好きなだけ弄ってください。