CODEWITHSUNDEEP
htmlcss
CuriousMind
CuriousMind

Reputation: 34155

Css alignment & positioning of html5 video tags

I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:

enter image description here

This is what I could come up with:

<body>
    <div class="container">
        <div class="widget_contaner">
            <div class="widget_head">this is head of widget</div>
            <div class="widget_body">
                <video class="large_video" src="#"></video>
                <video class="mini_video" src="#"></video>
            </div>
        </div>
    </div>
</body>

css

.widget_contaner {
    right: 0px;
    position: fixed;
    bottom: 30px;
    z-index: 99999999999999;
}
.widget_header {
    background-color: #3fa757;
    width: 240px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #ccc;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    font-family:'Open Sans', sans-serif;
    border-radius: 5px;
}
.widget_body {
    width: 240px;
    height: 150px;
}
.large_video {
    height: 100%;
    width: 100%;
}
.mini_video {
    position: absolute;
    height: 30%;
    width: 30%;
    bottom: 32px;
    right: 4px;
    opacity: 0.75;
}

so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?

Jsfiddle: click here

Upvotes: 0

Views: 8133

Answers (2)

Huangism
Huangism

Reputation: 16448

Like this?

http://jsfiddle.net/EbsaL/3/

I added background colour so it is easier to see

.widget_body {
    width: 240px;
    height: 150px;
    position: relative;
}
.large_video {
    height: 100%;
    width: 100%;
    background: green;
}
.mini_video {
    position: absolute;
    height: 30%;
    width: 30%;
    top: 0px;
    right: 0px;
    opacity: 0.75;
    background: purple;
}

The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container

Upvotes: 1

Derek Story
Derek Story

Reputation: 9593

See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.

.large_video {
    height: auto;
    width: 100%;
    border: 2px solid #000;
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/derekstory/EbsaL/2/

Upvotes: 1

Related Questions