Creating a Sitefinity layout widget with an HTML5 video background

By February 28, 2014Uncategorized

Recently Sitefinity.com updated their site and with it came a change to their landing page slider. The slider has a looping HTML5 video playing in the background behind an interactive content slider. I thought the video idea was pretty neat so I sought to replicate it in the form of a Sitefinity layout widget.

I’m sure the idea of having a video background may be terrifying to some with concerns to page load times and bandwidth consumption, however, if you take a look at the video used by Sitefinity you will notice that it is actually only a few hundred KB. While this may still constitute a large file for a decorative page item, it is by no means monstrous and is still well within the realm of usability.

Creating the layout widget

There are a number of different ways we could use an HTML5 background. One way is to create a custom Sitefinity layout widget that calls on a static set of videos you can replace on your site through the server or Sitefinity managed file systems. This method is fairly simple and allows you to utilize the video as a true background to your page so you can drop whichever widgets you desire on top of it. If you’re not familiar with creating a Sitefinity layout widget you can check out the documentation here. The markup of our example just takes the Thunder generated custom 2-column layout widget. We add a custom class to the parent column wrapper and the individual columns themselves. As a first child to the parent column wrapper (.html5-video-column) we place our markup for the video background.

<div runat="server" class="sf_cols html5-video-column">
    <div class="video-background">
        <video preload="true" autoplay="true" loop="true">
            <source src="/Controls/Content/Videos/example.mp4" type="video/mp4">
            <source src="/Controls/Content/Videos/example.webm" type="video/webm">
        </video>
    </div>
    <div class="column-wrappers">
        <div runat="server" class="sf_colsOut sf_2cols_1_50 CustomClass1">
            <div runat="server" class="sf_colsIn sf_2cols_1in_50">
            </div>
        </div>
        <div runat="server" class="sf_colsOut sf_2cols_2_50 CustomClass2">
            <div runat="server" class="sf_colsIn sf_2cols_2in_50">           
            </div>
        </div>
    </div>
</div>

In order to get the video to act as a background to our column layouts and their widgets, we need to specify a few styles.

<style>
    .column-wrappers {
        position: absolute;
        top: 10px;
        left: 50%;
        z-index: 10;
        width: 1024px;
        /*Half of width*/
        margin-left: -512px;
    }
    .video-background video {
        z-index: -1;
        width: 100%;
        height: auto;
    }
    .html5-video-column {
        position: relative;
    }
</style>

We make the parent wrapper relative and the video wrapper absolute centering our content in the middle of the screen with the desired width. In this case we make the width of our column’s and their content 1024px, centered middle, with the video being responsive. To maintain the height of the video during page resize you can set the static width and height while adding overflow:hidden to the video’s wrapper.

Overall it’s a pretty simple but effective way to bring attention to your page. Enjoy!

The following two tabs change content below.