Bg image, live video and paralax effects

In this article a growing collection of notes and codes to keep track of visual background options, bg effects and interactive video tactics for future websites. Since last summer i am experimenting with streaming video in plain Javascript. The little amount of code and equipment needed to play with video streams shows how live-video-streaming has become a standard experience in our lives during the past 50 years.

Let’s take some steps back and first look at the basic usage of background-images for html-elements in css and the way to cover the full background.

<div class="bgContain">
    <div class="content"> ... The rest of your content ... </div>
</div>

.bgContain{
background-image: url( 'imagename.ext' ); /* basic image */
background-size: cover; /* fill out */
}

Now for a basic video display in a background:

<div class="vidContain">
    <div class="vid">
        <video> ... </video>
    </div>
    <div class="content"> ... The rest of your content ... </div>
</div>

.vidContain {
    width:300px; height:200px;
    position:relative;
    display:inline-block;
    margin:10px;
}
.vid {
    position: absolute; 
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: -1;
}    
.content {
    position:absolute;
    top:0; left:0;
    background: black;
    color:white;
}

(video background source: stackoverflow.com)

To display the video we might need a link to it’s source or we should take care of uploading the video to our own server or website. To manage the video I found a helpfull article about some very common and important digital video knowledge. In the WordPress CMS we can use a basic on video upload to start with.

But wait, my video is 300mb! What now?
Maybe u can use ftp like this?

There is a lot more that i will cover here when time permits to play and research these background options more over.