Camen Design Forum

embedd youtube videos?

append delete Stephen

is there anyway to embedd a youtube video into a post for my forum?. as it would be cool to alow pepole post to add videos. its cool how you can post a link and it hyperlinks it thats awsome. but i am just wondering is there anyway to embedd the video?. :) thanks!

Reply RSS

Replies

append delete #1. Kroc

Is there a way? Currently, no. Is there a way to add it? Yes, anything is possible with programming. One could modify the code to find youtube links and convert them into embedded videos.

NNF doesn't embed pictures or videos because of easy abuse by anonymous users. One your forum, do you expect the public to be posting videos, or your moderators? It wouldn't be unrealistic to allow moderators to embed pictures and videos, and I would consider that feature, but it's not sensible to allow anonymous users to do that.

append delete #2. Johann

here's something I made for myself a while ago, it should be a starting point, at least better than nothing (it's up to you to figure out how to plug it into NNF though ^^)..

%
	$return = preg_replace (array(
		'/\[VIDEO\]http(.+?)youtube(.+?)\/watch\?v=(...........)(.*?)\[\/VIDEO\]/si',
		'/\[VIDEO\]http(.+?)youtu\.be\/(...........)(.*?)\[\/VIDEO\]/si',
		'/\[VIDEO\](.+?)vimeo\.com\/([0-9]+?)\[\/VIDEO\]/si',
		'/\[VIDEO\](.+?)screen\.yahoo\.com\/(.+?)-([0-9]+?)\.html\[\/VIDEO\]/si',
		'/\[VIDEO\](.+?)video\.google\.com\/videoplay\?docid=(.+?)&(.+?)\[\/VIDEO\]/si',
	), array(
		'<object width=100% height=300><param name=movie value=http://www.youtube-nocookie.com/v/\3?version=3&amp;hl=en_US&amp;rel=0 /><param name=allowFullScreen value=true /><param name="wmode" value=transparent /><param name=allowscriptaccess value=always /><embed src=http://www.youtube-nocookie.com/v/\3?version=3&amp;hl=en_US&amp;rel=0 type=application/x-shockwave-flash width=100% height=300 allowscriptaccess=always allowfullscreen=true wmode=transparent></embed></object>',
		'<object width=100% height=300><param name=movie value=http://www.youtube-nocookie.com/v/\2?version=3&amp;hl=en_US&amp;rel=0 /><param name=allowFullScreen value=true /><param name="wmode" value=transparent /><param name=allowscriptaccess value=always /><embed src=http://www.youtube-nocookie.com/v/\2?version=3&amp;hl=en_US&amp;rel=0 type=application/x-shockwave-flash width=100% height=300 allowscriptaccess=always allowfullscreen=true wmode=transparent></embed></object>',
		'<iframe src="http://player.vimeo.com/video/\2?title=1&amp;byline=1" width="100%" height="300" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
		'<iframe frameborder="0" width="100%" height="300" src="http://d.yimg.com/nl/vyc/site/player.html#vid=\3&lang=en-US"></iframe>',
		'<embed src=http://video.google.com/googleplayer.swf?docid=\2&hl=en&fs=true style=width:100%;height:300px allowFullScreen=true allowScriptAccess=always type=application/x-shockwave-flash></embed>',
	), $return);
%

I hope this shows up correctly :/ Otherwise feel free to edit/delete.

Yes, you can break a forum by posting huge images. But when it comes to videos, personally I actually prefer the video still thumbnail than a cryptic link which automatically plays the video when visiting it, I consider that less annoying... anyway, if anyone wanted to crap over a NNF installation, there is nothing stopping them, so the reasons people don't do it aren't technical ones. Just a thought or something :)

append delete #3. Johann

Oh, I forgot to mention, that the above snippet expects the links inside of [video] tags -- you might want to remove those bits from the beginning and end depending on your use.

append delete #4. Kroc

Nice code example Johann, that would be very easy to plug in to the `formatText` function :)

append delete #5. Johann

Cheers :) I'm not that good with regexes, so there's likely to be room for improvement, but it worked nicely for me so far. By now I kinda prefer that over pasting embed codes, even in my own pages, because it allows for to tweaking all embed codes in one fell swoop. I'll probably never "need" that, but it just feels good haha ^^

append delete #6. Stephen

Hey guys thanks so much for ur cool replys its cool it looks really nice with just the links. as i have a gamer thread on sleeping dogs for ps3 and xbox360. And i wanted links to the videos on youtube but it looks really sweet with the links and they are clickable automaticly so its cool.

Thanks guys!!!

append delete #7. ms

Well, here could be my answer to embedding utube vids.. i can edit files and know very little about programming, so not sure at all where should i insert that code. Maybe in index.php? :P

Thanks, maybe ill figure it out someday and be very happy!

append delete #8. Kroc

@ms: It goes into the lib/functions.php file, but I've tried this code out and it doesn't work because the YouTube hyperlink is being double-processed (once as a video and once as a normal hyperlink) -- producing invalid HTML. It'll need a bit more adaptation to work properly but I can't really help with that right this moment (brand new baby!)

append delete #9. Johann

Oops, I also just noticed that there are many instances of "\#" (with # being a number) which actually ought to be "\\#" -- not sure if I pasted bad code, or if that got mangled along the way.

I will download and install NNF today or tomorrow when I find time, and see if I can do this. I suck at git, but I might throw up the code changes/additions plus directions on a webpage somewhere (neocities, that is :D), at the very least.

Surely there is a way to to add the condition "unless it is directly preceeded by '[video]'" to the regex that turns URL into HTML links... that would at least be better than my initial idea, namely to parse for video tags once and base64encode the URL, then do the other stuff, and finally parsing the video tags again xD

append delete #10. Kroc

When I come around to implementing this myself there won't be any bbcode markup; any YouTube URL on its own line will be turned into an embed. What we'll need to do to handle more complex markup like this is replace the YouTube HTML tags with placeholders (as we already do with PRE blocks) before doing any further processing.

append delete #11. ms

You would definitely be of big help if youd make the embedding work! Id really, REALLY appreciate it.

Im putting up a forum for a small group of gymnasts, and the the option to embed youtube videos is almost a necessity for others to "coach" and evaluate other users training videos.

append delete #12. Martijn

> What we'll need to do to handle more complex markup like this is replace the YouTube HTML tags with placeholders (as we already do with PRE blocks) before doing any further processing.

Can’t the YouTube regex be run after the link regex? Then you can just write the regex to check for any P element containing only a single A element linking to YouTube (or any other video platform). That sounds possible and not too complex. Of course I haven’t worked with the NNF regex for a while so I could be off. Maybe I’ll look into it tonight.

Else we can try not to mess with the NNF source code and write a DOMTemplate extension for the `theme_custom` function, much like I have previously done for gravatars: https://gist.github.com/Zegnat/4088332

append delete #13. ms

@Martijn
With your gravatar support, can you set individual avatars for "registered" users in NNF and how?

Sorry if this is a stupid question :P

- ms

append delete #14. Johann

The reason I use a tag myself is that sometimes I just want to link to a video page without embedding it; fighting automagic isn't convenience, it's a maddening hassle.

append delete #15. Martijn

@ms, no. I guess it could be made to do something like that though. It just puts a Gravatar in-front of the user name – meaning it only works when people use their email address as name. There is a long-standing issue over at Github about implementing hooks for saving extra user data (e.g. email addresses): https://github.com/Kroc/NoNonsenseForum/issues/156.

With time anything could be build ;-)

@Johann, that’s true. But I think the beauty of @Kroc’s idea is that it takes the ‘YouTube URL on its own line’. How often have you written an link with no punctuation or other text on an empty line when you only want to link it? Normally when the purpose is to give just a link this will be within text.

append delete #16. ms

@Martijn: I only know little html/php. If i knew how, i would instantly make it so that u put the members avatars into /users/avatars/ -folder as username.gif.

Would that be a complex thing to do, and where should i start if i want to make one such a feature for NNF? Im on sick leave for 2months (knee surgery) so basically i got nothing but time on my hands :)

Thnx,

- ms

append delete #17. Martijn

Having NNF display avatars by requesting an image with the same name as the user is very possible. Although I would advice using some sort of alpha-numerical digest of the user name, because NNF supports a lot of different symbols in the name that might upset your server OS.

The problem is allowing people to upload these images. NNF does not have any sort of control panel for such an action so you will have to invent one. That pretty much means starting from scratch on a control panel.

append delete #18. ms

@Martijn Perhaps more easily in the way that users send their avatars via email and then admin uploads those into /avatars/ -subdirectory?

append delete #19. Martijn

@ms, sure, you could even repurpose my original script into something like:

%
/* Put this in theme.php, inside the `theme_custom` function. */
 
	foreach ($template->query('.nnf_reply-author, #nnf_post-author') as $node) {
		$value = '<img src="/avatar/' . md5(trim($node->nodeValue)) . '.png" alt="" /> '
		       . $node->nodeValue;
		$node->nodeValue = '';
		$frag = $node->ownerDocument->createDocumentFragment();
		if (!@$frag->appendXML($value) || !@$node->appendChild($frag)) {
			throw new Exception("Invalid HTML");
		}
	}
%

This should (untested) put an IMG infront of each name showing a PNG file in the avatars directory with an md5 hash of the user name as its filename. Someone with the name ‘ms’ would get `ee33e909372d935d190f4fcb2a92d542.png` infront of their name.

Note that you might want to put in a check `if` such a `file_exists` or you are going to get a lot of 404 hits against your server.

Haven’t had the time yet to get around to a DOMTemplate function for YouTube embedding. Soon, I hope.

append delete #20. ms

@Martijn thank you for all the informative answers youve found the time to write down for me! Really appreciate it, my friend.

I wish i knew how to do all this stuff myself :) The NNF is just perfect for my needs. Simple, easy to use, works fast. That video embed is just what would make it even better hehe

append delete #21. ms

back to the original topic..

I tried messing with the video embed code provided earlier in this thread, but all i got was huge amount of errors and lots of lost time :P

I guess with knowing just a little bit of html/css this thing is way out of my league. Hell, i dont even know what programming language that piece of code is :P

Lets say i want to learn to be able to do this kind of stuff. Any recommendations on where should i start, what language should i learn etc.?

append delete #22. Martijn

Just like the above avatar code, this goes into your `theme.php` file and then in the `theme_custom` function. This was specifically catered to the Greyscale theme. It replaces YouTube links (the different ones I could think of, at least) into actual YouTube embeds if they are the only thing on a line.

It also replaces URLs to images into `IMG` elements. Not because it was requested but because I wanted to show how you could extend both the regular expression and the `if`s to allow other type of links to be replaced. E.g. you could adapt it to embed tweets or other video services.

%
foreach ($template->query('//article/div/p[a and count(*)=1 and not(normalize-space(text()))]') as $node) {
		$link = trim($node->nodeValue);
		$replace = false;

		if (
			preg_match('~(?:
				https?://(?:www\.)?youtu(?:be\.com/(?:embed/|watch\?(?:.+&)?v=)|\.be/)([a-z0-9_\-]+) # Parsing YouTube URLs.
				|
				(.+\.(?:png|jpe?g|gif)) # Parsing image URLs.
			)~ixA', $link, $matches)
		) {
			if (strlen($matches[1])) { // We found a YouTube video.
				$replace = '<iframe width="480" height="360" src="http://www.youtube-nocookie.com/embed/' . $matches[1] . '?autoplay=0&amp;rel=0" frameborder="0" allowfullscreen="allowfullscreen">' . safeHTML($link) . '</iframe>';
			} else if (strlen($matches[2])) { // We found an image link.
				$replace = '<a href="' . safeHTML($link) . '"><img src="' . $matches[2] . '" alt="' . safeHTML($link) . '" /></a>';
			}
		}

		if ($replace) {
			$frag = $node->ownerDocument->createDocumentFragment();
			if (!@$frag->appendXML($replace) || !@$node->parentNode->replaceChild($frag, $node)) {
				throw new Exception("Invalid HTML");
			}
		}
	}
%

There are probably problems with this. I’ve only done minor testing. And you will need to change your CSS yourself if you want anything special.

Note: this is a *template* modifier and runs on the HTML given to the browser. Inside your RSS you will still be seeing the normal URL.

:: @Martijn added on 11 Jul ’13 · 22:08

I think I made a small mistake. Change this:

% Original line #9
				(.+\.(?:png|jpe?g|gif)) # Parsing image URLs.
%

Into this:

% New line #9
				(.+\.(?:png|jpe?g|gif)$) # Parsing image URLs.
%

Guess I should invest in a good Regex editor sometime soon, as soon as I have the cash. Something like http://brettterpstra.com/2013/07/01/mac-app-review-oyster/. Anyone know any good free alternatives?

append delete #23. ms

@martijn: u just made me a very thankful person! all i needed to do was add a simple <br/> -tag before any video or img :)

append delete #24. Martijn

u just made me a very thankful person!

Just send me a copy of Oyster ;-) No, just kidding.

I hope you have some use for it, and please do let me know if you run into any problems. Maybe I’ll make it into a gist soon so I can keep track of updates and start adding more services, but as I’m currently not employing NNF for anything big I don’t know if I’ll get around to it or not.

This did have the nice side-effect of resulting in a possible fix for DOMTemplate’s `iframe` support: https://github.com/Kroc/DOMTemplate/pull/20. So there’s that :D

append delete #25. MS

I tried to mess with the avatar -code. Instead of the md5 thing, id like to have avatars' filenames as username.png (cause i couldnt figure out the md5 stuff myself :P

%
<img src="/avatar/' . md5(trim($node->nodeValue)) . '.png" alt="" />
%

How should i modify this line of code so someone like 'ms' would have the avatar name ms.png. Propably an easy task, but i just keep getting errors no matter how i try to accomplish this :)

Thanks!

- MS

:: @MS added on 26 Oct ’13 · 07:11

Oh, and i also tried to change the code so it would show something like a default icon in case there is no 'username.jpg' but outcame failure, so if its a very simple one line of code could someone help me out, id be more than happy once more! :)

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn