Skip to main content

How to play Youtube video as page background using jQuery ?

You might have seen some website which have video played on the background which automatically fit to screen and play when you access the page. Today I will show you how you can set Youtube video as page background using jQuery.

Watch Demo

jQuery Background video

We will use jQuery backround video V1.0 for our example, jQuery background video V1.0 is the plugin that lets you set the youtube video as page background.

Steps to add Youtube video as page backround

First of all create one index.html file and add following code, you need to add an id to <div>.

 

Youtube Like Progress bar using jQuery Nprogress.js

If you ever notice on Youtube you have seen a progress bar on top of the page, which shows you the page loading time. Now a days most of the Apps and Web pages are using this kind of Progress effect to attract viewer and force them to stay for few seconds on page until it loads.

The dynamic in-site progress bar on Youtube shows the loading animation on the top header area till the video or page load completely in the browser. Normally loaders are the rounded .gif images with different effects, which shows a progress but here the progress loader bar is actually a slim progressive line on the top of the header, which loads from left to right or vise versa until the page finish the loading stage.

SkaDate / Oxwall : How to create simple widget in Skadate X / Oxwall ?

What is widget in Skadate / Oxwall ?

Widgets are an essential part of the web software. You can call widgets as an extension block of that software or the theme. In Skadate / Oxwall widgets are components that can be attached to the widget panels. Lets dig little deep into Skadate / Oxwall widgets.

Skadate / Oxwall available Widget Panels

There are three panels in Skadate / Oxwall which currently used for widgets to attached with.

  1. Index page
  2. Dashboard
  3. Profile page

Here in our example we will create a Custom status widget, which will be used in Dashboard panel. You can use one widgets to all panel there are no limits.

Skadate / Oxwall : Console Items / Console menu

Console Items or Console menu are the interactive controls of the Skadate X / Oxwall software. It helps users to get real time notification with notification read / unread counter. Console item have different type of behaviors it depends on the use of that particular console item.

Console Item Button

Console item buttons are usually a simple button but you can set different type of layout using css options. You can set different behaviors like some can set to open a popup window and some can open link. Simple examples of Console item buttons are sign in, and sing up/Join buttons.