Video Sidebar Widgets

This plugin enables the user to embed Flash Video from various video sharing networks into the widgetised sidebar and content of a WordPress powered blog.

This plugin includes the following components.

  1. Video Sidebar Widget
  2. Random Video Sidebar Widget.
  3. Video Quicktag in TinyMCE Editor
  4. Post Meta Video Widget

This article consist of two pages, please look for the page links within this document.

Support

For support, please follow me on Twitter. Tweet me your support questions by using @denzelchia – Video Sidebar Widgets before your question.

I am trying to built up my twitter followers, therefore I will only reply your support question if you follow me. Thanks.

Video Sharing Networks Supported

  1. YouTube
  2. Vimeo
  3. WordPress.tv
  4. Veoh
  5. Metacafe
  6. Revver
  7. Blip.tv
  8. MySpace Videos
  9. DailyMotion
  10. Viddler
  11. Tudou
  12. Youku
  13. 6.cn
  14. Google Videos
  15. Tangle (not supporting anymore)

Changelog

Version 5.7

  1. Added check to random video widget, do not print video caption p tags if user did not enter a video caption.

Version 5.6

  1. Corrected typo error for constant WP_PLUGIN_URL in vsw_tinymce.php

Version 5.5

  1. Re-fix youtube video autoplay issue as previous fix in version 5.4 does not work for some users.

Version 5.4

  1. Fixed youtube video autoplay issue

Version 5.3

  1. Fixed Widgets page loading issue in IE 9

Version 5.2

  1. Replaced all null value to blank, to tackle an IE 9 bug reported by user. Solution provided by Ryan Willis.

Version 5.1

  1. Fixed PHP errors in WordPress Debug Mode

Version 5.0

  1. Added Post Meta Video Widget – The setup instructions are within Post Meta Video Widget and post meta video widget settings in post editor or page editor (custom field).

Version 4.1

  1. Fixed WordPress Video in Random Video Widget (Sorry forgotten about this in 4.0)

Version 4.0

  1. Dropped Tangle Video
  2. Fixed WordPress Video
  3. Add admin setting to turn of widgets or tinymce button

Version 3.0

  1. Allow embed of video in post or page content instead of just dynamic sidebar.
  2. Added Insert Video Shortcode Quicktag to TinyMCE Editor to enable user to embed video in post or page content (video shortcode).
  3. video shortcode for each video network, generated by Insert Video Shortcode Quicktag.
  4. This latest version is just an extension to Version 2.3 by using a function that has already exist in the plugin, to embed video in content area.

Version 2.3

  1. Removed auto play option for Blip.tv video, as it is causing video to not load in Internet Explorer.
  2. Allowed HTML links in Video Caption.

Version 2.2

  1. Includes support for Tangle.com Videos

Version 2.1

  1. Re-arranged Random Video Sidebar Widget Layout
  2. Included fixed size, no autoplay, video preview in widget form for easier identification of videos. Video will display after setting up and clicking save button. Video may not display due to slow connection, browser caching, wrong setting, or video removed from source.
  3. Included support for google videos
  4. Included Video Caption at bottom of Video
  5. Video Caption has a style class of “VideoCaption” to enable user to indicate font-height etc.

Version 2.0

  1. Includes Random Video Sidebar Widget. This widget will randomly select and display 1 of 5 preset videos.

Autoplay

No auto play of flash videos for the following video networks;

  • WordPress.tv
  • Tudou
  • YouKu
  • 6.cn
  • Blip.tv

Deploy Widgets and Admin Settings Page

  1. After activating plugin, go to Appearance > Widgets to set them up in your sidebar!
  2. There is a plugin admin page under settings. You can un-check component to disable it.

Embed Video in Post / Page Content

  1. Go to Add New under Posts or Pages.
  2. Wait for TinyMCE Editor to load.
  3. Look for the yellow color video quicktag on the first row of quicktags on the TinyMCE editor.
  4. Click on it will bring up a dialog box.
  5. Fill in the Video ID and Select the Video Source accordingly. Fill up all other option or leave it to use default setting.
  6. Click insert and a video shortcode will appear on the textarea of the editor.
  7. Save draft and click on preview to view video.
  8. To align video. Simply highlight the shortcode and click on alignment quicktag on the editor.
  9. Publish post or page after filling up content.

Screenshot of Video Quicktag

vsw-quicktag1

Screenshot of Dialog Box

vsw-quicktag2

Screenshot of video shortcode in editor.

vsw-quicktag3

Sample Youtube Video inserted using Insert Video Shortcode Quicktag

How to use Video Sidebar Widget

  1. Simply drag the widget to the sidebar. The widget will drop automatically.
  2. Key in the Title (if necessary).
  3. Select Video Source from drop down list.
  4. Key in Video ID (please look for instructions to find Video ID within this site).
  5. Key in Width of video.
  6. Key in Height of Video.
  7. Select Auto Play settings. Select Yes to play flash video automatically after web page loads, or Select No to prevent Video from automatically playing after web page loads.
  8. Auto play feature is not supported for certain video networks.
  9. Lastly, remember to click on save.
  10. A preview video of fixed width and height and without autoplay function will appear on top of the widget form.
  11. If the video is correct, you may proceed to see the video live on your blog sidebar.
  12. Re-enter width or height if necessary!
  13. To add a second video, simply drag another copy of video sidebar widget to your sidebar and go through steps 1 to 10 again.

How to use Random Video Widget

  1. Simply drag the widget to the sidebar. The widget will drop automatically.
  2. Key in the Title (if necessary).
  3. Key in Width.
  4. Key in Height.
  5. Select Video Source from drop down list.
  6. Key in Video ID (please look for instructions to find Video ID within this site).
  7. Repeat step 5 and 6 for all five video settings.
  8. Select Auto Play settings. Select Yes to play flash video automatically after web page loads, or Select No to prevent Video from automatically playing after web page loads.
  9. Auto play feature is not supported for certain video networks.
  10. Lastly, remember to click on save.
  11. A preview video of fixed width and height and without autoplay function will appear on top of the widget form.
  12. If the video is correct, you may proceed to see the video live on your blog sidebar.
  13. Re-enter width or height if necessary!
  14. Video ID or Source left empty will be automatically assigned with Video 1 Source and ID. For example, if you set in only 3 videos and left Video 4 and 5 empty. Video 4 and 5 will be assigned with Video 1 settings.
  15. To add a second Random video, simply drag another copy of Random Video Sidebar Widget to your sidebar and go through steps 1 to 11 again.

Important Note for Random Video Sidebar Widget

  • Random Video Sidebar Widget will not work on blogs that uses cache plugins. It is because the cache plugin will deliver the generated static page instead of regenerating blog page or post through server script. However, it may work if your theme has a page template with a different sidebar. You can then set your cache plugin not to cache that particular page or post, if there is such option available in that cache plugin.
  • Reload the webpage where you use the widget, each time you reload, the widget will randomly pick 1 of the 5 video you set for display. there are chances that it displays the same video after you reload. Just try reloading again.

How to use Post Meta Video Widget

  1. Please drag Post Meta Widget to Sidebar, The widget will drop open automatically. Please read and follow the instructions. There is no setting within the widget.
  2. Go to individual post or page edit to setup the Widget setting, Find Post Meta Video Widget Settings within post or page editor. You can find the setup instructions there.

Youtube Video ID

Video ID is highlighted in red

YouTube Video

Video ID is found on the Browser URL bar. At the end of the URL of the Video, excluding v=

http://www.youtube.com/watch?v=UR_y8eoKpRg&eurl

YouTubeID

Vimeo Video ID

Video ID is found on the Browser URL bar. At the end of the URL of the Video, excluding /

http://vimeo.com/5516895

VimeoID

WordPress.tv Video ID

Video ID is found within the embed shortcode for WordPress.com Blog.

[wpvideo L3nt8oyg]

WordPressVideoID

Veoh Video ID

Video ID is found at the end of the of Video Link underneath the Flash Video. Includes letter v.

http://www.veoh.com/browse/videos/category/entertainment/watch/v18760736ErwFFA9C

VeohID

Metacafe Video ID

Metacafe Video

Video ID is found on the Browser URL bar. Towards the end of the URL of the Video, from watch/ onwards

http://www.metacafe.com/watch/yt-ysSxxIqKNN0/linkin_park_new_divide/

MetacafeID

Download

You can download the plugin at WordPress Plugins Repository.

View All Screenshots in Gallery Mode