html - Css alignment & positioning of html5 video tags -

I have two video tags that I want to align on the lower right corner of the screen. Further, the internal video tag should overlap the external video tag, as if this image is given below:

I can come up with:

  & lt; Body & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "widget_contaner" & gt; & Lt; Div class = "widget_head" & gt; This is the head of the widget & lt; / Div & gt; & Lt; Div class = "widget_body" & gt; & Lt; Video class = "big_video" src = "#" & gt; & Lt; / Video & gt; & Lt; Video category = "mini_video" src = "#" & gt; & Lt; / Video & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt;   
 css  
 . Widget_contaner {right: 0 pixels; Status: fixed; Bottom: 30px; Z-index: 99 999999999999; }. Widget_header {background-color: # 3fa757; Width: 240 pixels; Text align: center; Text-transform: uppercase; font-weight: bold; Limit: 1px solid # ccc; Font-size: 12px; Height: 25px; Line-height: 25px; Font-family: 'Open Sense', without Serif; Boundary-radius: 5px; }. Widget_body {width: 240px; Height: 150px; } .large_video {height: 100%; Width: 100%; } .mini_video {status: absolute; Height: 30%; Width: 30%; Bottom: 32px; Correct: 4px; Opacity: 0.75; }   
 So I was wondering how can I get these video tags to be related to each other, as given in the image?  
  JSField :   
 
 
 Like this?  
  
 I added background color, so it's easy to see  
 . Widget_body {width: 240px; Height: 150px; Status: Relative; } .large_video {height: 100%; Width: 100%; Background: green; } .mini_video {status: absolute; Height: 30%; Width: 30%; Top: 0 pixels; Correct: 0 pixels; Opacity: 0.75; Background: purple; }   
 The widget body is relatively located, and you just have to give the full mini video position and 0px to the top right. If you want the Widget widget to be located below in the bottom right corner: 0;    for widget containers