The 10 best jQuery video plugins

jQuery is one of the simplest HTMLs to handle JavaScript. It allows users to compress long codes into one simple line. Its wide variety of plugins can also make adding video to websites easier as well. Video plugins help users to complete tasks quickly with ease. Here are the 10 best video jQuery plugins, which are free and easy to use.

1. Tubular

By using this jQuery plugin designers can set any YouTube video as the background of their site. It is easy to use this plugin, but designers should have pre-installed JavaScript and Flash Player before choosing Tubular for their video needs. Tabular is based on swfobject and jQuery.


This jQuery plugin will add fit-to-fill background video to a website easily. It can also play a series of videos on the background of a site. For devices that don’t support auto-play, video can be supported by displaying a big background image.

3. CuepointJS

This plugin allows designers to create and handle cue-points in an HTML5 video. It creates ‘an array of subtitles with the seconds’ and displays them.

4. jQuery Video Gallery

This is a simple and lightweight jQuery Video Gallery used for displaying .swf videos. These videos are displayed in a window when a thumbnail is selected.


5. jPlayer

This plugin is an open source media library. It is written in JavaScript and is completely free. Users can quickly add a video or audio to a web page using jPlayer.

6. BigScreen

Designers can use the JavaScript Fullscreen API through this simple library. Fullscreen mode on a site or app can be easily achieved using BigScreen. Many more productive features are provided by this jQuery video plugin.

7. Video LightBox

Embed a video into a site, page or blog with a few clicks using this free wizard program. Designers need not write even a single line of code for embedding a video with this tool.

8. Popcorn.js

This is an HTML5 media framework which is written in JavaScript. It is a useful plugin for filmmakers, developers, designers and others to create time-based interactive media. This video jQuery plugin is a part of Mozilla’s Popcorn project.


9. jQuery Webcam Plugin

Users can access their webcams in three modes using this plugin. Designers can use callback mode, save mode and stream mode to get the job done. Users can access the different modes  via a small API directly with JavaScript or jQuery.

10. FitVids.JS

FitVids.JS is a lightweight video plugin used for fluid width video embeds that is easy to use.


Add any type of video or audio to a website, web page or blog using any one of the  jQuery plugins mentioned above. These plugins are easy to use and allow designers to embed videos within a few clicks, without writing even a single line of code.

Create a Responsive Navigation Menu Using jQuery

With more and more people accessing the web from mobile devices and tablets every day, it's becoming increasingly important for websites to be responsive, and one of the most important aspects of a mobile friendly website is a responsive navigation. Creating a mobile-friendly navigation menu without the use of a plugin might seem like a daunting task, but one can actually be created fairly easily with some media queries and a few lines of jQuery. Start with your standard navigation menu, which can be styled however you like, and probably looks something like this:
  1. <div id="menu">
  3. <ul>
  4. <li><a href="#">Link One</a></li>
  5. <li><a href="#">Link Two</a></li>
  6. <li><a href="#">Link Three</a></li>
  7. <li><a href="#">Link Four</a></li>
  8. </ul>
  9. </div>

Next, you're going to need to add some jQuery to your code.
  1. $("#menu").addClass("responsive").before('<div id="three-lines">&#9776;</div>');

This line of jQuery adds the CSS class responsive to the #menu div. and adds the div #three-lines before #menu.responsive. The #three-lines div is what creates the ☰ character that will replace the navigation menu when the screen gets to a certain width. This line of jQuery won't work properly unless we add some styling. We're going to need a media query to make sure that #menu.responsive becomes hidden when the screen gets to a certain width, and one that allows #three-lines to show up at that same point.
  1. @media screen and (max-width: 700px){
  2. #menu.responsive{
  3. display: none;
  4. }
  5. }
  7. @media screen and (min-width: 700px){
  8. #three-lines{
  9. display: none;
  10. }
  11. }

Now the default navigation menu will display when the browser window is above 700px, but when the window becomes smaller than 700px, it will disappear and the #three-lines icon will become visible. All that's left to do is add one more jQuery function that toggles the navigation menu when the #three-lines div is clicked.
  1. $("#three-lines").click(function(){
  2. $("#menu").toggle();
  3. })

Now when the ☰ icon is clicked, the #menu div will appear. It will disappear if the ☰ icon is clicked a second time. Customize the responsive menu by adding your own styling or effects.

10 jQuery plugins with full screen support

Developers can check out the list below of jQuery plugins that provide full screen support. These plugins provide full screen website, image galleries, editor, slider, menu, loading bar, Youtube videos and modal windows.

1. fullPage.js

fullPage.js is a simple and easy to use plugin to create full screen scrolling websites (also known as single page websites or one page sites). It allows the creation of full screen scrolling websites, as well as the addition of some landscape sliders inside the sections of the site.

fullPage js

2. fullsizable 

fullsizable is a jQuery plugin that allows designers to make use of the available browser space for more enjoyable image viewing.


3. jQuery Fullscreen Editor

jQuery Fullscreen Editor plugin transforms text fields to customizable editors, either it can be used within a form or as a stand alone.


4. YoutubeBackground

This jQuery plugin for Youtube API allows designers to embed  YouTube videos into their web pages as a video background.

jQuery Youtube Background

5. Full Content

Full Content is a jQuery plugin that enables full screen single-page websites with url hash & animated scrolling.

fullContent js

6. HoldOn.js

HoldOn.js is a jQuery plugin to prevent user interaction while a webpage is loading or busy by displaying a full screen loading indicator.

HoldOn js

7. Alton

Alton is a jQuery-powered scrolling plugin that utilizes custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes scrolljacking idea, but greatly improves the often-poorly-implemented scrolljacking experiences designers might be used to.


8. JiSlider

JiSlider is a simple jQuery Plugin used to create an Image Slider. The settings can be modified to create the desired the slider.


9. animatedModal.js

animatedModal.js is a jQuery plugin that creates a full screen modal with CSS3 transitions. Designers can use the transitions from animate.css or create their own transitions.

animatedModal js

10. jQuery - fatNav

jQuery favNav creates a chubby full screen menu with nice hamburger toggle.


Use jQuery to Create a Simple Slider

All it takes are a few lines of code to make your own simple, lightweight content slider using jQuery -- no plugins necessary. First, use divs to separate your content and create each slide. Make sure each of these divs has its own unique ID. Each div should also contain text or an image/icon with its own class that will be used to trigger the jQuery code.  
  1. <div id="slide-1">
  2.      <p>First Slide</p>
  3. </div>
  4. <div id="slide-2" class="dormant-class">
  5.      <p>Second Slide</p>
  6. </div>

  Add these lines to your CSS, and make sure that every slide except the first one is given the class "dormant-class", like in the example above, so that they are initially hidden.  
  1. .dormant-class{
  2.      display: none;
  3. }
  5. .active-class{
  6.      display: block;
  7. }

  Here's where the jQuery comes in. When the trigger (#arrow) is clicked, we're going to use jQuery to add the class "dormant class" to the first slide, and remove the class "dormant-class" while adding the class"active-class" to the second slide.  
  1. $('#arrow').click(function(){
  3.    $('#slide-1').addClass('dormant-class');
  5.    $('#slide-2').removeClass('dormant-class').addClass('active-class');
  7. })

  The first slide will disappear as the second slide is displayed. To switch back to the first slide, the #slide-2 will have its own trigger (#arrow2), which will remove "active-class" and add "dormant-class" to the second slide, and remove "dormant class" from the first slide, making it active and visible once again.  
  1. $('arrow2').click(function(){
  3.    $('#slide-2').removeClass('active-class').addClass('dormant-class');
  5.    $('#slide-1').removeClass('dormant-class');
  7. })


6 Free JavaScript Books for Advanced Learners

Learn JavaScript is essential for anyone who wants to become a creative webpage designer.  It is one of the most powerful and dynamic programming languages which has been most commonly used alongside HTML and CSS.

JavaScript is used by most web browsers and supports object oriented programming, which also has an application programming interface for working with texts, dates, etc.

There are a wealth of materials available online or to download to guide students through the different levels and aspects of JavaScript.  Here are a few books which can be very useful in providing quick tips and pointers. They are designed  to engage beginners and advanced programmer alike.

1. The JavaScript Tutorial by Illya Kantor

The JavaScript Tutorial by Illya Kantor is a free book available online that has been designed for beginners. This book provides readers with an introduction to basic elements, syntax of JavaScript and the important tips like setting up the environment, testing script with different browsers etc. It also introduces advanced concepts which is a good starter to improve knowledge of JavaScript.

2. Eloquent JavaScript by Marijn Haverbake

Eloquent JavaScript by Marijn Haverbake is available online for free or in paperback form. This book provides a good introduction to JavaScript and the basic programming concepts needed in order to master the language. This book starts from values, types and operators used and takes readers through the program structure, basic and advanced functions which are available in JavaScript.   It also gives an introduction about how JavaScript works in tandem with other design languages such as HTML, CSS.


3. Addy Osmani’s Learning JavaScript Design Patterns

Learning JavaScript design Patterns is a very short and sweet book available for free online and also downloadable for a minimal charge, which discusses design patterns in JavaScript. This book starts with an introduction to design patterns, discussing their importance and optimum ways of implementing them. The main target audience for this book is professional web developers who want to improve their knowledge of design patterns and how they caeffectively implement them with JavaScript.


4. Gerd Wagner’s Building Front-End Web Apps with Plain JavaScript

This book by Gerd Wagner is a complete tutorial on how to develop a front end web application by only using JavaScript without using any third party framework or library. This book has been designed for JavaScript programmers and also software developers who have experience in OOPS based programming languages. The book provides readers with a complete code of example applications which can be run from the web server to help users with the nuances of building a front end application.


5. DOM Enlightenment by Cody Lindley

For those who want to become experts in JavaScript, a knowledge of Data Object Modeling is important. This book is a gem available online that is one of the most exhaustive books written about DOM Scripting. The book is designed for advanced programmers to understand the nuances of JavaScript and taking to the next level.

6. Mikito Takada ‘s Single Page Apps in Depth

One of the best ways to learn to use a programming language is to study where and how it is implemented. This book by MIkito Takada focuses on how to develop web applications and provide practical solutions to common issues that arise at different stages of development.


12 Best Free jQuery Table Plugins

Creating and sharing tables on websites are a bit tough. But jQuery contains various plugins that allows users to create and showcase their data in form of tables very easily.

1. jQuery Tabledit

jQuery Tabledit is a jQuery plugin that is easily downloadable and can be used to create tables which are completely in sync with Bootstrap. It also allows users to edit tables the same way as spreadsheets and provides a button to switch between edit and view.

2. Fixed Header Table

This jQuery plugin helps to create tables fixed headers. It can also vary the size of the table according to the needs of the project.


3. Bootstrap Data Table

Bootstrap Data Table allows users to create tables and edit them with ease. Users can also sort find a table with this plugin. It also allows users to add various icons and fonts with the aid of Fontawesome.

4. Bootstrap Table

Bootstrap Table is great for those looking for an extended plugin that offers loads of features like radio, checkbox, extensions, pagination and sort options. It is available for free and can be installed easily.


5. jQuery Edit Table

jQuery Edit Table is one of those jQuery table plugins that can be used with equal ease with both AJAX and HTTP POST. This light weight jQuery plugin helps to cover up mistakes which are made by missing or faulty input in a table.


6. HighChartTable

Many  times, designers are required to convert HTML tables into high chart graphs in order to represent them on a website. This process is greatly aided by HighChartTable. It allows all table data to be converted into graphs which can be customized too.


7. Stupid Table

Don’t get intimidated by the name. Stupid Table is stupidly easy to deal with. This extremely lightweight jQuery plugin can be used extensively for sorting out various tables. All you need is a little knowledge in JavaScript and you are ready to roll.


8. FooTable

Working on a mobile site? Need a jQuery plugin which will make tables look cool and crisp even on small screen? Try FooTable. This plugin allows users to turn their HTML tables into expandable responsive counterparts of the larger versions with size not being a factor.

9. Dynatable

Utilization of  jQuery, HTML5, and JSON makes Dynatable a lot of fun to work with. It provides users with all the basic extensions needed for table creation and editing along with much more. It is perfect for viewing large datasheets in smaller versions.


10. jQuery Filter Table

jQuery Filter Table is a perfect plugin for those looking for something to hide various rows or columns of a table which users are not interested in viewing. Just apply the required filter and the job is done.

11. Stacktable.js

Organizing a table often proves to be a tedious job. But thanks to Stacktable.js it can be done in a jiffy. The plugin equates the height and width of the entire table, thus formatting them to appear stacked and pretty.


12. jQuery Treetable

jQuery Treetable is the jQuery plugin which allows users to convert lists and trees of data into perfectly aligned tables which are easier to view and incorporate in a website.


Advertise on our network
See our other websites