Example: YouTube video integration

The pgn4web chessboard follows the game played in the YouTube video.

You can add a similar page to your website or to a chess blog.

instructions

The video integration is achieved using the video.html file with the appropriate parameters to select the youtube video. Browsing to video.html?help=true shows all the configuration options for video.html.

video.html requires video timing information to be added to the PGN data. Here is an example of a PGN data for use with video.html:

[Event "WCh W Blitz Final"]
[Site "Moscow RUS"]
[Date "2010.09.18"]
[Round "30"]
[White "Krush, Irina"]
[Black "Kosteniuk, Alexandra"]
[Result "0-1"]
[TimeControl "180+2"]
[WhiteClock "3:02"]
[BlackClock "3:02"]
[VideoTime "2"]

1. d4 {[%vt 18.6] [%clk 3.03]}
1... Nf6 {[%vt 19.4] [%clk 3.03]}
2. c4 {[%vt 20.1] [%clk 3.04]}
2... e6 {[%vt 20.7] [%clk 3.05]}
3. Nc3 {[%vt 21.3] [%clk 3.03]}
3... Bb4 {[%vt 22.6] [%clk 3.06]}
...

The [VideoTime "0.0"] tag specifies when during the video playback this game should be loaded. This is useful in case the video shows more than one game. Every game must have this tag (otherwise defaulting to zero).

The [%vt 18.5] comment specifies when during the video playback this move should be shown. Every move must have this comment info (otherwise defaulting to zero).

All video timing info (header tags and move comments) should be sequential through the PGN data, this means the first game of the video should be the first in the file and so on. If the video shows first game A, then game B, then game A again, the file should contain three games, with A as game number one and three.

Clock info ([WhiteClock "3:02"] header tag and [%clk 3.03] move comments) is optional.

pgn4web also integrates with HTML5 video.

Please note, some older browser might not support this functionality.

using the youtube video description as PGN data

When the youtubeVideoid=... URL option is used to specify a youtube video, if the pgnData=... URL option is not used, then video.html will use the text of the youtube video description as PGN data. This is an alternative option to storing the PGN data in a separate file. Remember to use the % at the beginning of the line for general comments that could otherwise disrupt the parsing of the PGN data.

how to generate the video timing info

video.html provides a facility to interactively add video timing information to the PGN.

Use the videoUrl=... and the pgnData=... URL options to specify your video and the associated PGN file. Then add the setupVideotimes=true option. In this mode, while the video is playing, clicking the capture button will add video timing info to the next game or move. After all games and moves have been updated with video timing info, you can copy the PGN data from the textbox for replacing your original PGN file.

step by step

1. upload your chess video to youtube and take note of the video id, for instance mYvIdEoId
2. check the correctness of the corresponding PGN data, for instance with pgn4web's board-generator.html
3. add the corresponding PGN data as youtube video description information; clock information is optional: [WhiteClock "xxx"] and [%clk yyy]; if in addition to the PGN data other info has to be include in the video description, use text lines starting with %; make sure the video allows embedding
4. open video.html in setup mode with video.html?youtubeVideoid=mYvIdEoId&videoHeight=xxx&videoWidth=yyy&setupVideotimes=true (with xxx and yyy being the video height and width in pixels) and progressively capture video timing info for each game and move
5. update the PGN data in the youtube video description with the addition of the video timing info [VideoTime "xxx"] and [%vt yyy]
6. publish your chess video as video.html?youtubeVideoid=mYvIdEoId&videoHeight=xxx&videoWidth=yyy, optionally adding the videoAutoplay=false, videoLoop=true and horizontalLayout=false URL parameters

The steps above require ownership of the youtube video in order to add the PGN data to the video description. In order to use a third party youtube video, it is possible to refer to PGN data from a file local to video.html using the pgnData=... URL option, similar to these step by step instructions