How to embed WebM to forums (phpBB, vBulletin, IPB, Simple Machines, MyBB, ...)

All about the program
Post Reply
User avatar
admin
Site Admin
Posts: 631
Joined: 03 Jun 2014, 19:14

12 Apr 2016, 19:22

Hello!
It is easy to embed WebM video to almost any forum.
No plugins or add-ons required in vast majority of situations.
Browser support
All popular browsers (Firefox, Chrome, Chromium, Opera, Microsoft Edge) have native WebM support.
YouTube offers WebM videos as part of its HTML5 player.
Safari and old Internet Exlporer require third-party WebM software (at the moment).
As you can see, vast majority of browsers support WebM.

It is up to forum admin to allow ot not to allow WebM content to be embedded to their forum posts.
Usually VTM produces WebM files within 400-800 kB range. WebM files are pretty small and personally I do not see any problems with embedding.
WebM is enabled at my forum.

You can learn more about WebM here:
https://en.wikipedia.org/wiki/WebM
HTML embedding
HTML embedding is standard and pretty simple:
http://www.w3schools.com/html/html5_video.asp

This one will display your WebM video in native size:
Image

Here are some optional attributes:
Image
I would like to recommend to use CSS styles (max-width) to limit the maximum width of WebM videos (they may have different resolutions and it is senseless to hardcode widh and height). You can find examples below.
Below you can find information how to embed WebM to different forums.

Typically you just need to use

Code: Select all

[b][webm][/b]
BBCode.
If it is not present, you can ask forum admins to add WebM support to your forum (you can use this thread as a help).

Here are BBCodes and solutions for the most popular forums:

Please note: you can customize maximum width and height of the video in the code
phpBB
AdminCP > Posting > BBCodes > Add a new BBCode

BBCode usage:

Code: Select all

[webm]{URL}[/webm]
HTML replacement:

Code: Select all

<p>
<center>
<video controls="" autoplay="true" loop="true" style="max-width:1000px;">
	<source src="{URL}" type="video/webm">
</video>
</center>
</p>
Help line:

Code: Select all

[webm]URL[/webm]
Display on posting page: Yes

Here is a screenshot of how it is done at this forum:
http://www.suu-design.com/Files/VTM/BBCodes.png

Working example is here:
Introducing VTM 9.0 WebM and APNG animation feature

You can change maximum width and height of the video in the code
vBulletin
AdminCP > BB Code Manager > Add New BB Code

Title: WebM Embedder
BB Code Tag Name: webm

Replacement:

Code: Select all

<video width="1024" height="768" controls autoplay="true" loop="true">
<source src="{param}" type="video/mp4">
<source src="{param}" type="video/ogg">
<source src="{param}" type="video/webm">
<object data="{param}" width="1024" height="768">
<embed src="{param}" width="1024" height="768">
</object> 
</video>
Example:

Code: Select all

[webm]URL[/webm]
Description: Embed WebM's onto forum
Use {option}: No
Remove Tag If Empty: No
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No
Disable Automatic Link Parsing Within This BB Code: No

You can customize maximum width and height of the video in the code
IPB (Invision Power Board)
Just add new Media Tag:
{1}.webm

and a replacement for it:

Code: Select all

<video controls autoplay="true" loop="true" style="max-width:1000px;">
    <source src="$1.webm">
</video>
You can customize the code as you want
Simple Machines (not sure)
I am not familiar with that board. It looks like you will need a Mod to embed video to posts.
Something like that:
http://www.simplemachines.org/community ... c=395039.0
Please post here if you will find a more elegant solution.
MyBB
Admin > MyCode > Add new MyCode

Regular Expression:
\[webm\](.+?)\[/webm\]

Replacement:

Code: Select all

<p>
<center>
<video controls="" autoplay="true" loop="true" style="max-width:1024px;">
	<source src="$1" type="video/webm">
</video>
</center>
</p>
Usage:

Code: Select all

[webm]URL[/webm]
Also, in global.css you can add something below:

Code: Select all

video {
    max-width: 1024;
}
You can customize maximum width and height of the video in the code
Please post your solutions here.
Post Reply