Archive for November, 2015

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.

2. BIGVIDEO.JS

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.

jquery-video-plugin

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.

jquery-video-plugin

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.

jquery-video-plugin

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:
HTML:
  1. <div id="menu">
  2.  
  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.
JAVASCRIPT:
  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.
CSS:
  1. @media screen and (max-width: 700px){
  2. #menu.responsive{
  3. display: none;
  4. }
  5. }
  6.  
  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.
JAVASCRIPT:
  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.