CSS: Выравнивание элементов неизвестного размера

Question

Я создаю приложение для видеочата на основе https://apprtc.appspot.com/ (для запуска этого приложения вам нужно открыть тот же URL-адрес на двух отдельных вкладках).

Я хотел бы внести два изменения в это справочное приложение.

1. Центр видео в окне браузера.
2. Совместите небольшое видео в правом нижнем углу большого видео (похоже на Skype).

Мне удалось решить # 1, используя http://css-tricks.com/centering-in-the-unknown/, но я не могу понять, №2. Проблема заключается в том, что большой размер видео является динамическим (WebRTC меняет свой размер с течением времени в зависимости от условий процессора и полосы пропускания). Он также растет/сжимается при изменении размера окна браузера (подходит для просмотра). Когда большое видео изменяет размер, небольшое видео проигрывает выравнивание.

Как выровнять небольшое видео в нижнем правом углу большого видео, когда размер последнего изменяется со временем?

ОБНОВЛЕНИЕ: Пожалуйста, предоставьте решение с перекрывающимися видео, а не только полями. Кроме того, убедитесь, что видеоролики растут/сокращаются, когда окно браузера растет/сокращается.

Answer 1

Вы можете использовать позиционирование CSS:

HTML

<div id="container"> 
    <div id="big_video"> 
     test 
     <div id="small_video">test2</div> 
    </div> 

</div> 

CSS

#big_video{ 
    border: 1px solid black; 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 

#small_video{ 
    border: 1px solid black; 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

Fiddle: http://jsfiddle.net/FhtCP/12/