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

All about the program

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

Postby admin » 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 [webm] 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: [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: [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: [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: [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.
User avatar
admin
Site Admin
 
Posts: 415
Joined: 03 Jun 2014, 19:14

Return to Video Thumbnails Maker

Who is online

Users browsing this forum: No registered users and 1 guest