Mini Mods - Auto Youtube Link-Converter

So basically this is a total easy-to-implement plugin, which converts standard youtube links to video-embeds on the fly without urging users to use the video-button because I think it is unnecessary.


On post display, the plugin checks if the post contains at least 1 youtube link in the form of

<a href="http://www.youtube.com/watch?v=somecode&some=params">http://www.youtube.com/watch?v=somecode&some=params</a>

and converts them using the default vB video bbcode parser.

Code can be modified to fit your needs, altough there shouldn't be much to add.
If you're the special performance-freak, I'm curious if you can enhance data/query-performance. So let me know if you do.

INSTALL:

- Download attached XML File and import it as an addon.

Changes since 1.3:
- Now works properly on iPad

Changes since 1.2:
- Supports mobile devices with fallback-display if browser doesn't support flash/embed codes
- Allows the user to specify the above mentioned replacement code for mobile browsers
- Minor improvements & Fixes

Changes since 1.1:
- Moved regular expression and index position into admincp settings to allow easier changing in the future
- supports new youtube link format: "http://youtu.be/*somevideocode*"

Changes since 1.0: (or: why should I download that mod again?)
- Added Link parsing in post-preview mode and in post reviewbits (the latest posts you see under the new reply form)

Now every post containing youtube-links should display the embedded video instead.
Works with any number of youtube-links and any kind of text surrounding them.

Let me know if you have trouble/questions.

[alexm]

Originally Posted by dirkji

Since last week all YouTube embeds show up as black boxes on IE. Chrome and Firefox work fine. Does anyone have an idea what's causing this?

I think it is in the vBulletin template 'bbcode_video' (it's nothing to do with this mod). If you change //www to https://www IE should work. I just did the same to my vBulletin 4.2.3 and looked here first!

edit: Now it doesn't work again

edit2: It's something weird with IE debugger, when I open Developer Tools and then refresh it opens the Youtube fine!

[dirkji]

Originally Posted by alexm

edit2: It's something weird with IE debugger, when I open Developer Tools and then refresh it opens the Youtube fine!

Yes, I noticed that as well.

When I change:

<meta http-equiv="X-UA-Compatible" content="IE=9">

to

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

the videos work fine, but then my image uploader stops functioning.

Any other ideas?

[dirkji]

It seems to have fixed itself, probably an IE update...

[IggyP]

hmm...noticed ipad mini retina not showing the embeds...any ideas of that? i see in the notes it was meant to be working on at least some form of tablet..

in fact is there a simply all around better version of this? seems like there would be, just didnt see it yet...better to not use flash at all isnt that possible by now?


EDIT:
i removed the flash part of the code....it now loads the embeds into posts....but if you try to play them, it redirects to youtube...anyone know what is the better replace code than this for mobile?

<a href="http://www.youtube.com/watch?v=%1$s">
YouTube Video:<br /><img src="http://img.youtube.com/vi/%1$s/0.jpg" width="480" height="360" alt="Click here to view on youtube" /></a>

[IggyP]

got it...

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/%1$s"
frameborder="0"></iframe>

[djbaxter]

Posting just for my own clarification the solution from IggyP above...

FIND near line 130 in XML file:

	<defaultvalue><![CDATA[<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/%1$s" width="480" height="360">

REPLACE with:

	      <defaultvalue><![CDATA[<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/%1$s" frameborder="0"></iframe>

Note: This sort of works for iPad. However, it leaves a lot of empty white space with a thumbnail and the fallback link to view on Youtube near the bottom of the post.

On iPhone, it just creates a lot of empty white space, although the video is viewable if I switch to desktop or iPad.

Did I do something incorrectly?

[IggyP]

its just a simple code i found as alternate to the flash...i didnt try it by mobile on phone size, but perhaps its the size settings in the code? i wanted to keep it sort of big for "mobile" tablet but of course phones maybe thats a problem? hmm


theres other options that can be added as well of course.. >> https://developers.google.com/youtube/player_parameters


also this quote from the source: which suggests the sizes 240 and 135 instead of what i used..fwiw...

Use the iframe-embedded version of the player instead of the Flash one. The embedded version is smart enough to render the appropriate player based on the device (ie, it may render the Flash version for phones like the Android that support it, or the HTML5 version for iPhone).

<iframe
width="240" height="135"
src="http://www.youtube.com/embed/videoid"
frameborder="0" allowfullscreen>
</iframe>

EDIT: fwiw, testing with an s5 and ipad mini retina i cannot reproduce, seems to work proper and scale and everything but thats not necessarily saying much

EDIT2: also dont forget this mod has options....so dont really need to hack the xml

[djbaxter]

Originally Posted by IggyP

EDIT2: also dont forget this mod has options....so dont really need to hack the xml

D'oh!

And that explains why it wasn't working for me. When I go to the options, it still has the old Flash code.

Going to try editing that now.

[djbaxter]

And your original fix when I edit it in options works just fine. I tweaked the fallback it just a little for formatting so now the complete contents of the mobile text box in Options looks like this:

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/%1$s"
frameborder="0"></iframe>
<param name="movie" value="http://www.youtube.com/v/%1$s" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<!-- Fallback content -->
<br /><br/><a href="http://www.youtube.com/watch?v=%1$s">
Click here to watch video on YouTube<br /><br /><img src="http://img.youtube.com/vi/%1$s/0.jpg" width="240" height="180" alt="Click here to view on youtube" /></a>
</object>

Thank you, IggyP, both for the fix and for helping me through my D'Oh! moment.

[alexm]

I?ve got a problem... over the last 2 weeks (maybe longer!) videos appear as a black window if you use IE11. What it appears to be is:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

in headinclude.

If you remove it Youtube embeds correctly... but unless you have this added then people can?t press enter if they have anything but simple text turned on.

I don?t know whether it is IE?s fault or YouTube?s fault (probably IE )... does anyone else have this problem?

Alex