X

mediaWrapper: Responsive iframe video

iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.

Illustration by akselkreis

  • Paid
X

Royal Video Player: Responsive Player

Royal Video Player is a responsive player that can play local videos, streaming videos or YouTube videos. (It’ll play pretty much anything with an mp4 format.)

What makes it pretty awesome is that this player works on mobile devices and desktops and with any browser and supports unlimited playlists. This is a pretty robust tool for any site that used plenty of video.

The player comes with plenty of features as well. These include:

  • Responsive layout and design
  • Optional deep-linking for playlists and videos
  • Optional embedding and sharing
  • Ability to load any type of playlist
  • HTML markup playlists that can be created manually or from a database
  • Multiple hover effect options
  • Video description tooltips
  • Multiple positioning options
  • Customizable thumbnails
  • One skin for all videos, regardless of source
  • Autoplay, loop and shuffle options
  • Plenty of great play, volume and other buttons

The player is a robust tool with plenty of features. It is available for $14 from the Envato Market.

X

jQuery Video Player Extend

Create a custom-branded video with jQuery Video Player Extend. This little tool allows you to add a logo and more to videos for a custom playing experience.

In addition to a custom logo, you can add markers with labels, play a YouTube video, play FLV video (with basic support) and make your video responsive. The tools work well and look nice.

With a little working HTML knowledge, you can grab the code and get this feature working on your website in a hurry. (And you won’t regret it.)

X

PrettyEmbed: Embed YouTube Stream Into Website

PrettyEmbed is the only tool you’ll ever need to embed your YouTube stream into your website. And it does it all while cleaning up the video so the preview looks nice on the screen. The result is a still frame from the video with a play button but none of the other “junk” that can show with YouTube embeds, such as titles and other icons.

The plugin fetches the highest resolution preview image available for maximum impact on all screens, allows for advanced customization options and optional FitVides support.

Use of PrettyEmbed requires jQuery and waitForImages installation. It can be installed using an HTML5 driven method or a script driven method.

The plugin is packed with options once you finish installation, so that videos preview in just the manner you like. Set the size of the preview, custom URL, what information to show or hide on the preview, whether the video should play or loop, display of closed captions (or not), allowance of full-screen mode, color options and more.

PrettyEmbed really does a great job of making your embedded video previews match the aesthetics of your website framework for a more polished design.

X

CoverVid: Create HTML5 Video for Background

CoverVid is a great little tool that allows your HTML5 video behave like a background cover image.

This tool is different because it is lightweight — coming in at only 800 bytes — and is usable in native Javascript and jQuery. Its logic is parent based, meaning the parent element can be any size (not necessarily just a full-screen background).

Here’s how it works:

  • Pull the project down from GitHub and link covervid.min.js into your site. Make sure it is loaded after jQuery.
  • It is important to note that the video you target will use its parent element to scale. With that in mind, there’s some simple markup and base styling to size the video’s parent/wrapper element.
  • Call the plugin and you are ready to go.

What’s especially nice about CoverVid is that this tool allows you to create a trendy video-based homepage with ease. You can add this tool to your existing site and get a trendy design refresh in no time. The hardest part will be finding the perfect video to represent your website or brand page.

X

Camvas

Small, annotated library to stream webcam content to a canvas element.

  • Video
X

Video Voting

Vote on your favorite parts of a video & jump to popular segments.

  • Spotlight
X

FitVids

A  jQuery plugin for fluid width video embeds.

X

jSpeaker

This plugin will speak the text thats in the selected object.

X

BigVideo

Makes it easy to add fit-to-fill background video to websites.