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.
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.
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!
Latest posts by Falafel Posts (see all)
- Matching Complex Query String Rewrite Rule in IIS - March 22, 2017
- Using Google Services in UWP C# Apps – Part 2 - February 7, 2017
- Using Google Services in UWP C# Apps – Part 1 - February 6, 2017
- Redis Caching in the Google Cloud Platform - February 3, 2017
- Entity Framework with Google Cloud SQL - February 2, 2017