• Photo & Multimedia
  • Showcase & Versatiles
  • Menu & User Interface

HTML5 Video Player

There are many ways to play video clips on web. You can use Adobe Flash, QuickTime player, and other video plugins to play movies. However there are so many various platforms so we have to find out the best way to play your cool movie on cross-platform including mobile devices. If you inserted QuickTime mov into your web page, it will not play on many platforms except for Mac. Must avoid to use QuickTime plugin. (If you are using iWeb, MUST NOT drag a videoclip to iWeb. Many of the visitors would NOT be able to watch it!) This widget can play every platform with HTML5 power and you can place a video file to anywhere on web such as Dropbox, Google+, and etc... This best video player is from VideoJS.


To make a Cover (poster) image:
You can simply extract a frame that will be used as the cover from a video via VLC. (If you do not have this video player yet, please download it here: http://www.videolan.org/. After installation, play your movie then pause it when you see a specific frame that you want to extract to a cover picture. Then choose a menu, "Video > Snapshot" on the top. A captured image will be saved into your local folder.

To make a Subtitle:
A subtitle should be WebVTT (extension: 'vtt'). You can create a vtt file from Microsoft Caption Maker (but we wouldn't recommend the MS tool because it's too buggy.) or using just a text editor. Below is an example of 'WebVTT' subtitle format. (You can download our sample vtt file from here. For the best working, place a subtitle file to your web server.)

WEBVTT 00:01.000 --> 00:04.285 Inside Pro Pack Launch anywhere a web browser is installed! 00:06.000 --> 00:10.000 Build 70+ cool widgets Photo & Video Gallery / FancyBox / Showcase / Menu & UI / Essential Tricks+ 00:15.000 --> 00:18.212 "Build your own" wizard Two fingers make Magic (copy & paste)! 00:27.000 --> 00:31.000 "I am Preview" See your custom widget from your web browser in real time! 00:32.200 --> 00:34.500 Share your contents with various style widgets 00:35.000 --> 00:37.000 There are 7 beautiful color labels to be sharable

Build your own

  • Input data in the fields below. (Your contents such as images, videos, and music can be anywhere on web. 'Google Drive' is recommended.)
  • You can insert up to 3 subtitles. (A subtitle should be 'VTT' format.)
  • Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
  • Paste the source code into HTML snippet in iWeb. (Non-iWeb users can also copy & paste each code in the <head> and <body> to each tag.)
  • We'd highly recommend to use free cloud services like Dropbox / Google Drive to host your multimedia because they provide more stable and speedy connection.

* Customize styles

* Optional settings

* Subtitle styles

* Insert contents (available video format: mp4 / m4v)

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.