VideoShowcase

(Difference between revisions)
Jump to: navigation, search
(3 Step Process)
(Added - Adding Thumbnails to Videos: section)
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{#ev:youtube|FZXSR-0WPkQ|400|right}}
 
'''Series:''' [[DisplayBuddy]]
 
'''Series:''' [[DisplayBuddy]]
 
'''Release date:''' October 19, 2010
 
 
==Description==
 
==Description==
VideoShowcase is a plugin that uses video links from [https://youtube.com Youtube] and [http://vimeo.com Vimeo] to generate thumbnail images for the videos and display those images as video embed links on the front end of your site. When a visitor clicks one of the thumbnail image links the video for that link is displayed in a styled thickbox. The different video links are stored in groups so that the different groups can be displayed through out your website by placing them in widget areas or using shortcodes.
+
Video Showcase is a plugin that uses video links from [https://youtube.com Youtube] and [http://vimeo.com Vimeo] to generate thumbnail images for the videos and display those images as video embed links on the front end of your site. When a visitor clicks one of the thumbnail image links the video for that link is displayed in a styled thickbox. The different video links are stored in groups so that the different groups can be displayed through out your website by placing them in widget areas or using shortcodes.
  
==Features==
 
* Automatically retrieves the video's thumbnail image from the source site
 
* Set custom image as videos thumbnail image
 
* Media library integration
 
* Displays videos in thickbox
 
* 5 thickbox styles
 
* randomized display
 
* easy to reorder videos
 
* Multiple groups
 
* widget compatible
 
* Shortcode generator
 
* supports Youtube and Vimeo
 
* Tooltip help on forms
 
* Automatic upgrades.
 
  
 
==3 Step Process==
 
==3 Step Process==
Step 1. Create a Group
+
====Step 1. Create a Group====
To create a Group set the name, thumbnail width, and thumbnail height.
+
The first step in adding VideoShowcase to your site is to create a group to store the video entries in. The link to VideoShowcase in the WordPress admin area is in the DisplayBuddy section of the menu. When you click the VideoShowcase link it will direct you to the area where you can create a group. The only information requested to create a group is a name for that group, group image width, and group image height.
 +
 
 
[[File:Create_group.png‎]]
 
[[File:Create_group.png‎]]
  
Step 2. Add videos to the groups
+
After you have created a group it will be added to a table that lists all of the existing groups and lists information about them.
To add a video set the title and paste in the videos source site URL.
+
 
 +
 
 +
====Step 2. Add videos to the groups====
 +
Once you have created a group then you will be able to add videos to that group. To add videos to a group you can click the "Add Videos" link that is next to the name of the group. There are two different forms for adding videos. The first form can be used for adding a YouTube or Vimeo video, and the second form can be used to add a stand alone video (ex: mp4, flv, and mov).
 +
=====Adding a YouTube or Vimeo video=====
 +
This form only requires a title and a video page URL.
 +
 
 
[[File:Add_video.png‎]]
 
[[File:Add_video.png‎]]
  
Example of what to put in the "video UrL" are outlined in red in the images below:
+
Example of what to put in the "video URL" are outlined in red in the images below:
  
[[File:Youtube_sourc.png]]
+
[[File:Youtube_sourc.png|418px]]
[[File:Vimeo_source.png]]
+
 
 +
[[File:Vimeo_source.png|418px]]
 +
 
 +
Since the videos are stored on YouTube and Vimeo those sites already have images for those videos that VideoShowcase retrieves from those sites and uploads them to your WordPress media library. If you decide that you don't like the image that is retrieved from YouTube or Vimeo then you can edit the video entry and upload or select an image from your media library.
 +
=====Adding a Stand Alone video=====
 +
This form is used for adding videos that stored in stand alone locations (ex: Amazon S3, Rackspace).
 +
Here is a list of the required information for adding a stand alone video:
 +
* Video Title
 +
* Video File URL - VideoShowcase can only play mp4, flv, and mov files so it is important to make sure that the video files are in the correct format (ex:http://mysite..com/videos/anyvideo.mp4).
 +
* Select or upload an image - Upload an image or select an image from your media library.
 +
 
 +
=====Adding Thumbnails to Videos=====
 +
You can add thumbnails to both Stand Alone videos and externally hosted videos.
 +
 
 +
*For Stand Alone videos:
 +
**Select and upload an image when you're adding your video under the "Add Stand Alone Video" option
 +
[[File:Video_Showcase_‹_Besizm_—_WordPress.png]]
 +
 
 +
*For YouTube and Vimeo videos:
 +
**Add the video
 +
**Edit the video by clicking "Edit Video" link in front of the video
 +
**Click the "Custom Image" button.
 +
[[File:1Video_Showcase_‹_Besizm_—_WordPress.png]]
 +
 
 +
*Related forums
 +
**http://ithemes.com/forum/index.php?/topic/8442-feature-requests-and-ideas/#p97488
 +
**http://ithemes.com/forum/index.php?/topic/17519-click-to-play-icon-not-using-custom-image/#p88954
 +
 
 +
====Step 3. Display VideoShowcase on your site====
 +
VideoShowcase can be added to your site using two different methods, widgets or shortcode.
 +
====Widget====
 +
Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the VideoShowcase widget into the widget area that you would like for it to display in and fill out the widget form with the information for the group you would like to show.
 +
====Shortcode====
 +
The groups table in VideoShowcase will display a list of information for each different group that you have created. In the row of the group that you would like to display there is a "Create Shortcode" link that will bring up a popup form to help create a customized shortcode for that group and settings you would like. If you would like to add a VideoShowcase group to a post or page all you have to do is copy that shortcode and paste it the content of a page or post.
  
Step 3. Display the groups on your site using widgets or shortcode.
 
Add VideoShowcase to widgets or use the shortcode generator.
 
 
[[File:widget_display.png]]
 
[[File:widget_display.png]]
 +
 +
==Customize VideoShowcase==
 +
 +
====Extra Customizations Policies====
 +
[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check out the official policy and details on any Extra Customizations]
 +
 +
====Force VideoShowcase to appear OVER/ON-TOP of Flash====
 +
 +
Many times, flash and other external elements can start appearing on top of VideoShowcase videos, whether or not VideoShowcase video is loaded above or before such elements.
 +
 +
One solution for this is to change the wmode key for your flash.
 +
*Related links
 +
**[http://www.actionscript.org/forums/showthread.php3?t=105396 Make your flash appear BELOW/UNDER other elements]
 +
**http://ithemes.com/forum/index.php?/topic/18259-is-there-a-way-to-force-the-video-popup-to-the-topmost-layer/
 +
 +
====Change Default Video Size====
 +
 +
Currently, the default pop-up videos play at 500px width and 344px height.
 +
 +
You can change this to any other dimension you wish by changing the numeric values on lines 20 and 21 in the '''''wp-content/plugins/videoshowcase/js/jquery.pbvideosc.js''''' file.
 +
 +
Following are lines 20 and 21:
 +
 +
<code>
 +
default_width: 500,
 +
 +
default_height: 344,
 +
</code>
 +
 +
Only change the numeric value in the above 2 lines. Leave everything else as is.
 +
 +
*Related forum thread
 +
**http://ithemes.com/forum/index.php?/topic/19110-change-video-pop-up-size-to-hd/
 +
 +
====Hide Video Thumbnails====
 +
 +
You can hide the video thumbnails completely to show only the associated Titles, if they are defined. Put the following code in your theme's css file:
 +
 +
<pre code="css">#videoshowcaseid-1 img
 +
{
 +
display: none;
 +
}</pre>
 +
 +
Change the "'''1'''" in the <code>videoshowcaseid-1</code> to the number corresponding to your videoshowcase group number. That will hide the thumbnails completely.
 +
 +
*Related forum thread
 +
**http://ithemes.com/forum/index.php?/topic/19341-modal-window-off-of-text-link/
  
 
==Additional Resources==
 
==Additional Resources==

Revision as of 17:47, November 29, 2011


Series: DisplayBuddy

Contents

Description

Video Showcase is a plugin that uses video links from Youtube and Vimeo to generate thumbnail images for the videos and display those images as video embed links on the front end of your site. When a visitor clicks one of the thumbnail image links the video for that link is displayed in a styled thickbox. The different video links are stored in groups so that the different groups can be displayed through out your website by placing them in widget areas or using shortcodes.


3 Step Process

Step 1. Create a Group

The first step in adding VideoShowcase to your site is to create a group to store the video entries in. The link to VideoShowcase in the WordPress admin area is in the DisplayBuddy section of the menu. When you click the VideoShowcase link it will direct you to the area where you can create a group. The only information requested to create a group is a name for that group, group image width, and group image height.

Create group.png

After you have created a group it will be added to a table that lists all of the existing groups and lists information about them.


Step 2. Add videos to the groups

Once you have created a group then you will be able to add videos to that group. To add videos to a group you can click the "Add Videos" link that is next to the name of the group. There are two different forms for adding videos. The first form can be used for adding a YouTube or Vimeo video, and the second form can be used to add a stand alone video (ex: mp4, flv, and mov).

Adding a YouTube or Vimeo video

This form only requires a title and a video page URL.

Add video.png

Example of what to put in the "video URL" are outlined in red in the images below:

Youtube sourc.png

Vimeo source.png

Since the videos are stored on YouTube and Vimeo those sites already have images for those videos that VideoShowcase retrieves from those sites and uploads them to your WordPress media library. If you decide that you don't like the image that is retrieved from YouTube or Vimeo then you can edit the video entry and upload or select an image from your media library.

Adding a Stand Alone video

This form is used for adding videos that stored in stand alone locations (ex: Amazon S3, Rackspace). Here is a list of the required information for adding a stand alone video:

  • Video Title
  • Video File URL - VideoShowcase can only play mp4, flv, and mov files so it is important to make sure that the video files are in the correct format (ex:http://mysite..com/videos/anyvideo.mp4).
  • Select or upload an image - Upload an image or select an image from your media library.
Adding Thumbnails to Videos

You can add thumbnails to both Stand Alone videos and externally hosted videos.

  • For Stand Alone videos:
    • Select and upload an image when you're adding your video under the "Add Stand Alone Video" option

Video Showcase ‹ Besizm — WordPress.png

  • For YouTube and Vimeo videos:
    • Add the video
    • Edit the video by clicking "Edit Video" link in front of the video
    • Click the "Custom Image" button.

1Video Showcase ‹ Besizm — WordPress.png

Step 3. Display VideoShowcase on your site

VideoShowcase can be added to your site using two different methods, widgets or shortcode.

Widget

Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the VideoShowcase widget into the widget area that you would like for it to display in and fill out the widget form with the information for the group you would like to show.

Shortcode

The groups table in VideoShowcase will display a list of information for each different group that you have created. In the row of the group that you would like to display there is a "Create Shortcode" link that will bring up a popup form to help create a customized shortcode for that group and settings you would like. If you would like to add a VideoShowcase group to a post or page all you have to do is copy that shortcode and paste it the content of a page or post.

Widget display.png

Customize VideoShowcase

Extra Customizations Policies

Check out the official policy and details on any Extra Customizations

Force VideoShowcase to appear OVER/ON-TOP of Flash

Many times, flash and other external elements can start appearing on top of VideoShowcase videos, whether or not VideoShowcase video is loaded above or before such elements.

One solution for this is to change the wmode key for your flash.

Change Default Video Size

Currently, the default pop-up videos play at 500px width and 344px height.

You can change this to any other dimension you wish by changing the numeric values on lines 20 and 21 in the wp-content/plugins/videoshowcase/js/jquery.pbvideosc.js file.

Following are lines 20 and 21:

default_width: 500,

default_height: 344,

Only change the numeric value in the above 2 lines. Leave everything else as is.

Hide Video Thumbnails

You can hide the video thumbnails completely to show only the associated Titles, if they are defined. Put the following code in your theme's css file:

#videoshowcaseid-1 img
{
display: none;
}

Change the "1" in the videoshowcaseid-1 to the number corresponding to your videoshowcase group number. That will hide the thumbnails completely.

Additional Resources

  1. Free Plugins by PluginBuddy
  1. PluginBuddy Tutorials
  2. PluginBuddy.com
  3. Support Forums
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox