I've implemented in one of my websites.
It is very simple and uses new embed codes of Youtube with <iframe>.
There is only an image displayed, and once you click on that image the actual Youtube stuff is dynamically loaded on-demand.
So, no Flash etc unless you klick the image, which speeds up page-generation time as only an image is displayed instead of full Flash-Videoplayer at beginning.
1.
This code you save e.g. "youtube.js" file and include it in header.
<script type="text/javascript" src="http://www.usmessageboard.com/youtube.js"></script>
2.
Image:
http://img691.imageshack.us/img691/3694/youtubeep.jpg
In vbulletin you have to make new bbcode/shortcode.
Maybe you have to modify it a little bit for Vbulletin, the "Replacement {param}" part. I don't use VBulletin.
3.
Now a user can embed Youtube this way:
This image will be displayed
And if image is clicked, Video and Flash is loaded from Youtube-Server on-demand and it replaces the Image:
[youtube]GSeqvWvbKcA[/youtube]
It is very simple and uses new embed codes of Youtube with <iframe>.
There is only an image displayed, and once you click on that image the actual Youtube stuff is dynamically loaded on-demand.
So, no Flash etc unless you klick the image, which speeds up page-generation time as only an image is displayed instead of full Flash-Videoplayer at beginning.
1.
This code you save e.g. "youtube.js" file and include it in header.
<script type="text/javascript" src="http://www.usmessageboard.com/youtube.js"></script>
function youtube( id )
{
var text = '<iframe width="560" height="315" src="http://www.youtube.com/embed/'+id+'" frameborder="0" allowfullscreen></iframe>';
document.getElementById(id).innerHTML = text;
}
2.
Image:
http://img691.imageshack.us/img691/3694/youtubeep.jpg
In vbulletin you have to make new bbcode/shortcode.
Maybe you have to modify it a little bit for Vbulletin, the "Replacement {param}" part. I don't use VBulletin.
Shortcode: newyoutube
Replacement: <img src="http://img691.imageshack.us/img691/3694/youtubeep.jpg" onclick="youtube('{param}')">
3.
Now a user can embed Youtube this way:
[newyoutube]pY0tEOf4KVk[/newyoutube]
This image will be displayed
And if image is clicked, Video and Flash is loaded from Youtube-Server on-demand and it replaces the Image:
[youtube]GSeqvWvbKcA[/youtube]
Last edited: