YouTube Video - Custom Tag

About
This Custom Tag will allow you to syndicate YouTube Videos. Users will need to copy the "Video URL" (or Video ID) into the video tags (or the editor if enabled).

Tags

Code

[video:youtube][/video]

Example
An example of the embedded video can be found on the VNC Web Services Demo Forums.

Note
The code supplied below must be imported to the Custom Tags feature of your UBB.threads install; the coding escapes any slashes, so just copy and pasting to your existing install just plain will not work, please use the import function.

Install
Save "CustomTag.txt" (with the code provided) and import into the "Custom Tags" feature of the control panel:
Control Panel -> Tools & Info -> Content Rebuilder -> Custom Tags -> Import new tags (bottom tab)

UBBT7.6.0-CustomTag.txt

PHP Code


<?php
$export_tags = array (
  0 => 
  array (
	'tag' => 'video:youtube',
	'descrip' => 'YouTube Video',
	'prompt' => 'YouTube URL or ID; eg: http://www.youtube.com/watch?v=xxxxxxxxxx',
	'regex' => '(|.*youtu\\.be/|.*v=)([a-zA-Z0-9_-]{8,12})(|&.*)',
	'markup' => '<div class="video-container"><iframe frameborder="0" width="640" height="360" src="https://www.youtube.com/embed/\\\\2" allowfullscreen></iframe></div>',
  ),
);
?>

UBBT7.5.x-CustomTag.txt

PHP Code


<?php
$export_tags = array (
  0 => 
  array (
	'tag' => 'video:youtube',
	'descrip' => 'YouTube Video',
	'prompt' => 'YouTube URL or ID; eg: http://www.youtube.com/watch?v=xxxxxxxxxx',
	'regex' => '(|.*youtu\\.be/|.*v=)([a-zA-Z0-9_-]{8,12})(|&.*)',
	'markup' => '<iframe frameborder="0" width="400" height="255" src="https://www.youtube.com/embed/\\\\2" allowfullscreen></iframe>',
  ),
);
?>

Compatibility
The v7.6.0 works with the updated common.css file entries in v7.6.0 to responsively display your videos depending on the size of your browser window (to a maximum of 640x360). As these classes do not exist in previous builds an additional set of code is provided for 7.5.x which displays videos in a 16:9 resolution of 400x255.

Attached File

UBBT7.5.x-CustomTag.txt (2 downloads)

Attached File

UBBT7.6.0-CustomTag.txt (9 downloads)

https://www.youtube.com/watch?v=mVmBL8B-In0

[video:youtube]mVmBL8B-In0[/video]

Which versions can this be used on ?

I've updated the post, there is code listed for the v7.5.x series and the upcoming 7.6.0 release which has the variable width bits in.

Hi Guys,
My youtube embedded videos have failed over the last few days.
I'm hoping this is the page with the latest update...

I'm running 7.5.9x
I have tried to import both codes from the first post with out success. I get a white screen, and all permissions are green with the permissions check.

See below for what happened and the code i have running now that is giving me that problem.

I'm assuming this is the page with the latest updates for custom tags.

Thanks in advance.

Description: Forum image

Description: Tag code causing the problem

I have now manually updated the tag code from Pre-v7.6.0 CustomTag.txt above and there is no change.

I was going to post this in the bugs section on ubb but as I pressed the preview its working fine over there ?
Ive not done any updates, and its the members that have come to me with this strange change.

See attached image for the manual entered code.

Attached picture video-tags3.JPG

I get the box size with the latest code above but an error on play.

Same youtube link HeplUHZsHfo entered on this forum.

[video:youtube]HeplUHZsHfo[/video]

OMG i didn't realise its Barry lol

Description: Error on play

Hey Mark, Im not sure if this will help you out or not, but this is a screen cap from UBBDev's current YouTube Custom Tag for UBB.threads 7.6.0 (Snapshot 20160813)

There is also a "common.css" file which is unique to UBBT v7.6.x series.

You can paste the following code in to your style sheet's EXTRAS section, if you are not currently on a 7.6.x series install. You'll need to do it to each of your styles. And then when you move to 7.6.x, you'll probably need to remove it at that time, since it will duplicate functionality.

Code

/* video embeds */
.video-container {height:0;overflow:hidden;position:relative;padding-bottom:56.25%;padding-top:30px;}
.video-container iframe,.video-container object,.video-container embed {height:100%;left:0;position:absolute;top:0;width:100%;}

Hey thanks ID but it did not work.
I got the nice big screen size

However an error on play back.

See attached

I have tried this in EDGE and the same issue.
Ive done a google and no one else is moaning yet. . . .

Description: Tag Details

Description: Displays as expected

Description: Pressing play gives the following error.

You have too many slashes near your "/embed/\\2" code.

You should not copy/paste the items in to the boxes from the above code. Instead, copy the whole code in to a txt file, and then import that text file to the Tag Editor.

It does not work the importer - white screen as posted above.
i will go with "/embed/\\2"

Yes that worked on the new code

Adding the following code to the media prompt 9my you tube button)

working with
J1v9IqL8Z1g

But not
https://youtu.be/J1v9IqL8Z1g

See attached.

But my old videos are still only showing as previous a tall back box ??
I still have the style sheet extras.

Need to play for a bit and see what is going on. . . .

Attached picture video-tags8.JPG

Originally Posted by Mark_S

But my old videos are still only showing as previous a tall back box ??
I still have the style sheet extras.

Since you basically "added a new UBBCode" (or updated your current code), you need to run the content rebuilder.

Control Panel Â» Content Rebuilder > Rebuild Posts

Quote

Rebuild Posts
Select this action if you've added a new UBBCode or if you've edited the list of censored words.

hint: If you enter the post editor on one of your old youtube posts and click the "Preview Post" button, you will get an idea of what the rest of your posts will look like before running the rebuilder on your whole forums.

Thanks ID242,
I have the https working now.

The devil is in the detail and your snapshots helped. The code in the first post needs some attention as it has the extra slashes in it and also the regex.

That's a great little trick the preview post...

I'm at a loss what has caused this to randomly fail ??

Originally Posted by Mark_S

The devil is in the detail and your snapshots helped. The code in the first post needs some attention as it has the extra slashes in it and also the regex.

The code in the first posts works if you dump it in to a text file and then import that text to your Custom Tag editer, by way of the "Import New Tags" button at the bottom. The newly imported tags will be prefixed with "new", so as to not be confused with your current tags.

The additional backslashes ( \\\\ ) in the OP's code, are intentional. They escape the following backslash.
You can read more on that at http://php.net/manual/en/regexp.reference.escape.php

I'm happy to hear that you finally got it all worked out
cheers!

Yeah, as Isaac stated, these are to be imported (hence "CustomTags.txt") and not just copied over; I'll update the OP with more clarity

Thanks for the help, appreciated.
However my importer is not working (White Screen upon submitting the file).

It's unlikely i will have to use it again, before version 6 so not worth going in to it.

I will be going clean install when 6 arrives

Clean install? on your main site? why start from scratch?!?

Does your error log have any entries after you get a white screen trying to import?