Youtube (etc.) in HTML5

[gopherhockey]

I would like to see someone do a modification that allows Youtube and other web videos to be displayed via HTML5.

The world is going mobile, and vBulletin is showing its age. Without getting into a huge argument, flash just doesn't cut it anymore (even on devices that can use it).

We are about to ditch vBulletin for a better social experience, but before we do I wanted to make one last attempt to get something relevant. Thought this was the place to fix the aging forum code.

[BirdOPrey5]

I'm pretty sure these are easy template edits in the template bbcode_video...

I imagine they'll be updated on new versions of vBulletin eventually, I'm pretty sure I saw info on upgrading the YouTube player on vbulletin.com already, probably somewhere here too if you search for it.

To update to YouTube HTML 5 in vbullrtin 4.x edit the template bbcode_video...
Save a copy first in case this doesn't work.

Find:

<vb:elseif condition="$provider == 'youtube'" />
<object class="restrain" type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/{vb:raw code}">
	<param name="movie" value="http://www.youtube.com/v/{vb:raw code}" />
	<param name="wmode" value="transparent" />
	<!--[if IE 6]>
	<embed width="640" height="385" type="application/x-shockwave-flash" src="http://www.youtube.com/v/{vb:raw code}" />
	<![endif]--></object>

Replace with:

<vb:elseif condition="$provider == 'youtube'" />
<iframe title="YouTube video player" width="640" height="385" src="http://www.youtube.com/embed/{vb:raw code}" frameborder="0" allowfullscreen></iframe>

Save the template and you should be set.

Edit- Just tested, yes it works.

[gopherhockey]

Excellent, thanks! Finally we can be forward looking... it seems to use HTML5 when it can, otherwise reverts back to the old flash.

Anyone know of any other video types that can be modified to support HTML5 like this? I think youtube is used 99% of the time, but vimeo is used on occasion.

Looks like vimeo can work using this code:

<vb:elseif condition="$provider == 'vimeo'" />
<iframe src="http://player.vimeo.com/video/{vb:raw code}" width="640" height="385" frameborder="0"></iframe>

[BirdOPrey5]

For Vimeo in the same template find:

<vb:elseif condition="$provider == 'vimeo'" />
<object class="restrain" type="application/x-shockwave-flash" width="640" height="360" data="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}">
	<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />
	<param name="wmode" value="transparent" />
	<!--[if IE 6]>
	<embed width="640" height="360" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />
	<![endif]--></object>

Replace with:

<vb:elseif condition="$provider == 'vimeo'" />
	<iframe src="http://player.vimeo.com/video/{vb:raw code}?title=0&amp;byline=0&amp;portrait=0" width="640" height="360" frameborder="0"></iframe>

Note while HTML5 is the future, being it's an iframe there is difference in SEO using HTML5 over flash, basically the old way is better for SEO.

[CK]

What are the positive/negatives for the end-user for html5 over flash and likewise for the forum owner?

[BirdOPrey5]

HTML5 is more compatible with newer devices like iPhones, iPads, and Android Tablets some of which don't do flash yet. It also means people who don't have flash installed for any number of security reasons can still use and see the videos. Overall HTML5 is a better technology for your users.

However as an admin there is a small tradeoff on SEO from what I've read. IFRAMES don't count towards your SEO so a URL that would be on your page from Flash embedding, perhaps with keywords in the URL or the embed code itself will not be present in the IFRAME/HTML5 code.

Personally I use HTML5 whenever possible as I'd rather keep the people currently on my site happy more than the small hit I might take with SEO.

[gopherhockey]

The world is going social and mobile quickly... I'm sure many of you have different experiences, but we're losing traffic to the likes of facebook every day. It doesn't help when people can't browse the forums with ease on their mobile devices.

It doesn't really matter what one thinks about flash, you have to appeal to the wider audience and reality is Apple doesn't support flash on its mobile devices, and many Android devices either can't run it, have promised "its coming", or find that their battery's drain too fast to make it worthwhile.

All this means I'm doing all I can to streamline the forums for mobile customers, and HTML5 is a key technology.

What was once an afterthought is now becoming a focus. I'm super thankful to have found this tip so that 95%+ of our inline videos now work under both technologies.

[CK]

So can I make the edits suggested without breaking the existing embedded youtube/vimeo/etc videos?

[gopherhockey]

Originally Posted by ChemicalKicks

So can I make the edits suggested without breaking the existing embedded youtube/vimeo/etc videos?

I was able to make the change and so far all my testing has been positive. It not only worked with new videos, but past ones as well. It seems to serve up HTML5 when a user can support it, otherwise revert to flash.

It also seems to be working with a mod I have installed that automatically embeds videos for when people just past them into a post: https://vborg.vbsupport.ru/showthread.php?t=230707 (I had to do the change the author noted about 4.0.3 even though my forums are up to the latest version)

[CK]

My code looks like this, is this a no go?

<vb:elseif condition="$provider == 'youtube'" />
<object class="restrain" type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded">
	<param name="movie" value="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" />
	<param name="wmode" value="transparent" />
	<param name="allowfullscreen" value="true" />
	<!--[if IE 6]>
	<embed width="640" height="385" type="application/x-shockwave-flash" src="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" allowfullscreen="true" />
	<![endif]--></object>

EDIT: Being an idiot, will give it a go and report back.

--------------- Added [DATE]1304890949[/DATE] at [TIME]1304890949[/TIME] ---------------

All working good. Is this something that's going to be rolled into vBulletin as standard?