1
This custom BBCode will allow you to display video clips on your forum similar to a lightbox style. It uses Videobox: Lightbox for videos by Faruk Can 'farkob' Bilir, and uses a MIT License. The files needed with similar instructions is attached below.
1. Upload the sd23_vidbox folder complete with its contents to /jscripts (in your root directory).
2. Go to ACP >> LOOK & FEEL.
From a skin dropdown on the right select >> Edit Template HTML >> All Global HTML >> global_board_header.
3. Find :
Add Below :
4. Goto ACP >> MANAGEMENT >> Add New BBCode
Custom BBCode Title: Video Box
Custom BBCode Description: Inserts a lightbox style video
Custom BBCode Example: [vbox=http://url2image]http://url2video[/vbox]
Custom BBCode Tag:[/b] [vbox]
Use Option in tag?: Yes
Switch option around?: Yes
Insert into the editor's 'Insert Special' menu?: Yes
Custom BBCode Replacement:
Enter 'content' dialogue text: Video URL
Done, Click: Add BBCode
Check on Faruk's site at: http://videobox-lb.sourceforge.net/
You will see that you could also add height and width adjustment as well as captions to your clips. However I have tried to keep this fairly simple.
You can adjust the the width/height after {option} to customize your preview thumbnail size.
See this working example: http://vistaoncurren...?showtopic=1229
Edit: Thanks to Sacred for helping me with the correct javascript placement in the skins.
Updated: To fix typo in this post and the ziped instructions.
1. Upload the sd23_vidbox folder complete with its contents to /jscripts (in your root directory).
2. Go to ACP >> LOOK & FEEL.
From a skin dropdown on the right select >> Edit Template HTML >> All Global HTML >> global_board_header.
3. Find :
<script type="text/javascript" src='cache/lang_cache/{$this->ipsclass->lang_id}/lang_javascript.js'></script>
Add Below :
<script type="text/javascript" src="jscripts/sd23_vidbox/mootools.js"></script> <script type="text/javascript" src="jscripts/sd23_vidbox/swfobject.js"></script> <script type="text/javascript" src="jscripts/sd23_vidbox/videobox.js"></script> <link rel="stylesheet" href="jscripts/sd23_vidbox/videobox.css" type="text/css" media="screen" />Save the template.
4. Goto ACP >> MANAGEMENT >> Add New BBCode
Custom BBCode Title: Video Box
Custom BBCode Description: Inserts a lightbox style video
Custom BBCode Example: [vbox=http://url2image]http://url2video[/vbox]
Custom BBCode Tag:[/b] [vbox]
Use Option in tag?: Yes
Switch option around?: Yes
Insert into the editor's 'Insert Special' menu?: Yes
Custom BBCode Replacement:
<a href="{content}" rel="vidbox" title="VideoBox"><img src='{option}' width='100' height='100' /></a>
Enter 'option' dialogue text: Thumbnail URLEnter 'content' dialogue text: Video URL
Done, Click: Add BBCode
Check on Faruk's site at: http://videobox-lb.sourceforge.net/
You will see that you could also add height and width adjustment as well as captions to your clips. However I have tried to keep this fairly simple.
You can adjust the the width/height after {option} to customize your preview thumbnail size.
See this working example: http://vistaoncurren...?showtopic=1229
Edit: Thanks to Sacred for helping me with the correct javascript placement in the skins.
Updated: To fix typo in this post and the ziped instructions.
Attached Files
-
sd23_vidbox.zip 61.92K
196 downloads
