Video embedding and popup player API

 

Slider style video gallery

[videogallery id=foodwishes num=6 slider=true]

The Slider video gallery is a beautiful swipe / drag carousel that also has buttons and auto-play. One can also use the keyboard left and right cursor keys.

The ShortCode [in square brackets] :

videogallery id=foodwishes num=6 slider=true

Other options :

transition=scroll | cover | uncover | crossfade | none (the default is scroll)
duration=800 (in milliseconds, of each transition)
interval=7500 (in milliseconds, between auto transitions)

View examples of video and video gallery embedding in WordPress

View examples of video and video gallery embedding in HTML, PHP, Joomla, Drupal, ...

 

Embedding individual videos

Anchor links

There are two ways to embed YouTube and Vimeo videos. Firstly, by adding an anchor link into your article text. Some editors will automatically convert a URL copied and pasted from a browser location (for example) into an anchor link.

There is a chance that you might need to make sure that any 'auto-embed' functionality (perhaps native to the CMS, and including previously employed plugin modules) is disabled.

Either http or https is fine, as is with or without www.


By default, videos are embedded full width. To arrange individual videos in two columns, add [2] at the start of the text of the link; for example :

Videos embedded with iframes

The system can also handle videos embedded with iframes.

YouTube

For example, videos embedded with code like this :

Vimeo

For example, videos embedded with code like this :

The text of the post/page/article is not changed, whether iframes or anchor links, only the display.

ShortCodes

A second way to include individual videos into articles is by using ShortCodes. There are ShortCodes for galleries too. There are ShortCodes available for CMSs such as WordPress and there are also ShortCodes for plain PHP/HTML pages too. More information on ShortCodes is further down.

Global parameters (and the default values)

JavaScript

YouTube only

kinaVP.showsearch=true; // type 'channel' only

kinaVP.showrelated=false;

Vimeo only

kinaVP.VPC="fae020"; // for the Vimeo player controls; use a bright color; don't include a # symbol

kinaVP.showsearch=true;

YouTube and Vimeo

kinaVP.showdescription=false; // whether to show the description next to the video thumbnail

kinaVP.showpaging=true;

kinaVP.showdate=true; // whether to display the video published date

kinaVP.showduration=true; // whether to display the video duration

kinaVP.showauthor=true; // individual videos


kinaVP.showshadow=true; // whether a drop-shadow is applied to thumbnails

kinaVP.showHD=true; // whether to display a link for the large HD popup player (at the moment, YouTube only). Further, the HD links only show if the user's screen size is sufficient

kinaVP.showtags=true; // End of gallery; 'All Videos'

kinaVP.showvideotags=true; // With each video; 'All Videos'

kinaVP.showhitsandlikes=true;


kinaVP.borderwidth=6; // individual videos

kinaVP.bordercolor="fff"; // individual videos (fff = white)


kinaVP.playimage=true; // whether to display play icons on the video thumbnails

kinaVP.centerplayimage=true; // whether to display play icons in the center (or in the corner if false)

kinaVP.playimagecolor="white"; // or blue, green, pink, white, blank

kinaVP.playimagecolor2="yellow"; // or blue, green, pink, yellow, blank - the rollover color

kinaVP.playicon=null; // a URL string for a custom play image; the ideal size is: 30-35 x 30-35px

kinaVP.playicon2=null; // a URL string for a custom rollover play image; the ideal size is: 30-35 x 30-35px


kinaVP.playinplace=true; // if true, video can play in the same space as the thumbnail, if the thumbnail width is at least 350px

kinaVP.customstyling=false; // if set to true, you can implement a CSS style for class videothumb

kinaVP.filmstyle=false;


kinaVP.detailsonhover=false; // show title etc over thumbnail on hover

kinaVP.nodetails=false; // not even a title or tooltip

kinaVP.descriptiononplayer=true;

kinaVP.roundedcorners=false; // slightly rounded corners for thumbnails

kinaVP.shadowcolor="aaa";

kinaVP.fadeopacity=0.75; // opacity when fade background for popup player (0.0 : no fade; 1.0 : totally black)

Best approach for updating settings

<script>
kinaVP.jQ(document).ready(function(){
kinaVP.playimagecolor="blank";
kinaVP.playimagecolor2="white";
kinaVP.updatesettings();
});
</script>

Thumbnail overlay icons

You can add up to three overlay icons to the thumbnails of individual videos. The details are appended to the anchor link text, each separated by #@. A tooltip can also be provided, separated by a |.

For example :

This can be hand-coded but more efficiently performed by server-side code (PHP).

The following icons are available (as with the play icons, specially designed for embed-videos.com), though you can use your own (ideally, 35 x 35px) :

          

Video Galleries

YouTube and Vimeo

id : the channel, playlist or favorites id

Optional:

type (channel (the default), playlist or favorites)

num=4 (how many videos to display)

columns=2 (for the thumbnail layout)

w (the thumbnail width (in px); used only when less than 220 and for square / round thumbnails)


bordercolor=fff (fff = white)

borderwidth=5

showshadows=true


filmstyle=false (top and bottom borders to give a filmstrip look)

rounded=0 (corner rounding radius; 0=none; 5=slightly rounded)

square=false (for the small square thumbnail style - 80px : 180px)


color= (title color; e.g. '36d')

bgcolor= (enclosing div background color; e.g. '111')

dark=false (whether theme/bgcolor is dark)


q= (YouTube)


showsearch=true

showpaging=true

showdescriptions=true (show the video descriptions next to the video thumbnails; if the thumbnail width is >= 350)


playicons=true


newpage=false (whether to open the video in a new page - WordPress)


playlists=false (if true, the channel's playlists are shown in the div with id equal to the gallery div id with "PL" appended. For example, if the gallery div id is MyVideos, then the div to present the playlists should have the id MyVideosPL.)

plstyle= (CSS styling for the playlists' enclosing div)


liststyle=false (for displaying the video description next to each video thumbnail in a single column, top-down list)


classic=false ('Classic' style gallery - player before thumbnails; set width=)


carousel=false (A carousel style gallery - circular; 3 videos visible; both auto and manual)


slider=false (A swipe style carousel style gallery - circular; 1 video)


videowall=false ('Video Wall' style gallery)

widescreen=false (Video Wall)

titleonimage=true (Video Wall; if w>=350)


brochurestyle=false ('Brochure style' gallery)

c123=false (Brochure)

columns=2 (Brochure)


source=youtube (or vimeo; which allows classic, brochurestyle and videowall style galleries to be available for Vimeo)


channelids= (for multi-channel selection; YouTube) *

* example: channelids='KeaneVEVO:Keane, thepussycatdollsvevo:The PussyCat Dolls, robbiewilliamsvevo:Robbie Williams'


To change the gallery content id (only needed to change the initial content):

updateGalleryId("[div id]","[new content id]","[type]");

where content id is the id of the channel, playlist or favorites and type is "channel", "playlist" or "favorites".


Vimeo

Basic style video gallery, but with search (limited, by Vimeo, to the most recent 60 videos).

id (the user, channel, album or group id)

Optional:

type (user (the default), channel, album or group)

num=4 (how many videos to display)

columns=2 (for the thumbnail layout)

w (the thumbnail width (in px); used only when less than 220 and for square / round thumbnails)


filmstyle=false (top and bottom borders to give a filmstrip look)

rounded=0 (corner rounding radius; 0=none; 5=slightly rounded)


style= (CSS for enclosing div)

styling= (CSS for each thumbnail; if set, overrides all other thumbnail styling)

borderwidth=6

bordercolor=fff

showshadows=true


width= (enclosing div)

color= (title color; e.g. '36d')

bgcolor= (enclosing div background color; e.g. '111')

dark=false (whether theme/bgcolor is dark)


showsearch=true (limited to the most recent 60 videos - Vimeo)

showpaging=true

showdescriptions=true (show the video descriptions next to the video thumbnails; if the thumbnail width is >= 350)


playicons=true


square=false (for the small square thumbnail style - 80px : 180px)

liststyle=false // for displaying the video description to the right of each video thumbnail in a single column, top-down list


To change the gallery content id (only needed to change the initial content):

VupdateGalleryId("[div id]","[new content id]","[type]");

where content id is the id of the user, channel, album or group, and type is "user", "channel", "album" or "group".


Slideshow

YouTube

Automatic slideshow

id : the id of the channel, playlist or favorites. The Youtube channel id may or may not be the same as the 'display name'; if the channel name has a space in it, you will need to use the associated channel id.

type : one of channel (the default), playlist, favorites

num : how many videos to display; the default value is 10.


source=youtube : or vimeo

borderwidth=6

bordercolor=fff

shadow=true


featured=false ('All Videos')

tag= ('All Videos')

q= (YouTube | 'All Videos')

style= (CSS styling)

Separate each parameter assignment with a comma.

For example : <div id="slideshow">type=channel,id=bjkina,num=15</div>

A maximum of one automatic YouTube slideshow per page.

Vimeo

type : one of user (the default), channel, album or group

id : the id of the user, channel, album or group

num : how many videos to display; the default value is 10.

Notice that the div id is vslideshow

A maximum of one Vimeo slideshow per page.

How to setup video embedding with Kina Video Presenter

There are many ShortCodes available for easily adding videos and video galleries to pages and posts/articles.

WordPress

WordPress Plugin

The procedure is as follows (from the 'dashboard') :

* Plugins - Add New
* Enable the plugin
* Appearance - Widgets (drag and drop the Video Presenter gallery widget, if desired)
* Settings - Kina Video Presenter settings (if you want a video gallery besides video thumbnails from anchor links in articles)

Make sure that WordPress's auto-embed is set to off in Settings - Media. And disable any other video embedding plugins.

Add video URLs in your posts as anchor links.

WordPress Plugin

WordPress CMS example video embedding site

 
 

ShortCodes (WordPress, HTML, PHP, ASP, ...)

Individual videos ShortCode

As an alternative to an anchor link, there is a ShortCode available for embedding individual YouTube and Vimeo videos into your pages.

Example : video v=1XdShh2rOvU   [in square brackets]

Optionally, specify the number of columns (the default is c=1) :
video v=1XdShh2rOvU c=2   [in square brackets]

[video v=1XdShh2rOvU c=2]
 

Video gallery ShortCode

There are also ShortCodes for YouTube and Vimeo galleries.

For example, videogallery id=foodwishes   [in square brackets]

[videogallery id=foodwishes]

For a Vimeo gallery, change videogallery to vimeogallery

Only the id is essential.

Options :

type=channel (or playlist / favorites - YouTube); type=user (or user / channel / album / group - Vimeo)

w=230   num=6   liststyle=false   filmstyle=false   playlists=false   square=false   borderwidth=6   bordercolor=fff   shadow=true   showdescription=true   autoplay=false

Locally hosted videos: img=   title=   duration=   author=   description=

Other options, such as the play icon colors, are defined in the module parameters and are global.


Universal ShortCodes (WordPress, Joomla, Drupal and other CMSs / PHP / ASP / HTML / ...)

The shortcode video is useful if you need to specify video start and stop times, or want a multi-column layout.

Individual videos ShortCode

As an alternative to an anchor link or iframe, there is a ShortCode available for embedding individual YouTube and Vimeo videos into your articles.

Example : video v=1XdShh2rOvU   [in square brackets]

Optionally, specify the number of columns (for layout of multiple videos; the default is 1, i.e. full width) :
video v=1XdShh2rOvU c=2   [in square brackets]

[video v=8ttSBO0SnsU c=2]
 

Start and stop times

For example: video v=d8BkxCehBa8 columns=2 start=1:25 stop=1:40   [in square brackets]

[video v=d8BkxCehBa8 columns=2 start=1:25 stop=1:40]

For convenience, times can be written in [m]m:ss style, but note that there is no hour, so for 1hour 10 minutes, write 70:00

You can specify a start time without a stop time, and vice versa.

 

Video gallery ShortCode

There are also ShortCodes for YouTube and Vimeo galleries.

For example, videogallery id=FISUTV   [in square brackets]

[videogallery id=FISUTV]

For a Vimeo gallery, add source=vimeo for a basic style gallery with search (limited, by Vimeo, to the most recent 60 videos).

Only the id is essential.

id : the channel, playlist or favorites id

Optional:

type (channel (the default), playlist or favorites)

Vimeo : user (the default), channel, album or group

w (the thumbnail width (in px); used only when less than 220 and for square / round thumbnails)

num (how many videos to display; the default is 4)


bordercolor=fff (fff = white)

borderwidth=6

showshadows=true


filmstyle=false (top and bottom borders to give a filmstrip look)

rounded=0 (corner rounding radius; 0=none; 5=slightly rounded)

square=false (for the small square thumbnail style - 80px : 180px)


color= (title color; e.g. '36d')

bgcolor= (enclosing div background color; e.g. '111')

dark=false (whether theme/bgcolor is dark)


q= (YouTube)


showsearch=true

showpaging=true

showdescriptions=false (show the video description below each video thumbnail)


playicons=true


newpage=false (whether to open the video in a new page - WordPress only)


playlists=false (YouTube; if true, the channel's playlists are shown in the div with id equal to the gallery div id with "PL" appended. For example, if the gallery div id is MyVideos, then the div to present the playlists should have the id MyVideosPL.)

plstyle= (CSS styling for the playlists' enclosing div)


liststyle=false (for displaying the video description next to each video thumbnail in a single column, top-down list)


classic=false ('Classic' style gallery - player before thumbnails; set width=)


videowall=false ('Video Wall' style gallery)

animated=true (Video Wall)

widescreen=false (Video Wall)

titleonimage=true (Video Wall; if w>=350)


brochurestyle=false ('Brochure style' gallery)

c123=false (Brochure)

columns=2 (Brochure)


source=youtube (or vimeo; which allows classic, brochurestyle, slider, carousel and videowall style galleries to be available for Vimeo)


channelids= (for multi-channel selection; YouTube) *

* example: channelids='KeaneVEVO:Keane, thepussycatdollsvevo:The PussyCat Dolls, robbiewilliamsvevo:Robbie Williams'

Other options, such as the play icon colors, are defined in the module parameters and are global.


ShortCodes for any CMS / PHP / HTML (additional video gallery types)


Only the id is essential. Change the id, columns and num parameter values as required.

Other options :

type= : one of channel (the default), playlist or favorites - Youtube, or user (the default), channel, album or group - Vimeo)

source= : one of : youtube (the default), or vimeo

 

Brochure style video gallery

A single or multi-column gallery style extending videogallery with video descriptions below the video thumbnails.

brochurestyle=true | false

width - the total gallery width (the default is 620).

columns - typically 1, 2 or 3 though 4 would be possible with templates having no sidebar (the default is 2).

num - the number of video thumbnails to show (per page)

color - the hex value without the #; for example: a5f. Used for the video titles. If not specified, the themecolor is used.

borders=true | false - whether to add borders to the video thumbnails (the default is true).

123=true | false - an extra parameter to brochurestyle in which the first (most recent) video is full width, followed by two videos at half width, with any further wideos at three across. Hence, suitable values for num are 3, 6, 9, 12, ...

Examples :

videogallery brochurestyle=true id=FISUTV c123=true num=9   [in square brackets]


For Vimeo :

videogallery source=vimeo brochurestyle=true id=outdoorresearch columns=3 num=9   [in square brackets]

[videogallery source=vimeo brochurestyle=true id=outdoorresearch c123=true num=9]

 

Classic style video gallery

A gallery style extending videogallery with a player above the gallery.

classic=true | false

columns - for the layout (1, 2, 3 or 4).

num - the number of video thumbnails to show (per page)

Examples :

videogallery classic=true id=FISUTV columns=2 num=4   [in square brackets]


For Vimeo :

videogallery source=vimeo classic=true id=outdoorresearch columns=2 num=4   [in square brackets]

 

Video Wall style video gallery

A gallery style extending videogallery which presents the thumbnails close together, without initial text.

videowall=true | false

width - the total gallery width (the default is 620).

w - the thumbnail width (set to achieve 2 or 3 columns, as desired).

num - the number of video thumbnails to show (per page)

Examples :

videogallery videowall=true id=FISUTV columns=2 num=4   [in square brackets]


For Vimeo :

videogallery source=vimeo videowall=true id=outdoorresearch columns=2 num=4   [in square brackets]

 
 

Home - embed popup videos