Author Topic: How Do I: Insert Video links into my posts?  (Read 7911 times)

0 Members and 1 Guest are viewing this topic.

Offline Krippers

  • Member
  • *****
  • Posts: 342
  • Power chord of discord is my chord
How Do I: Insert Video links into my posts?
« on: February 05, 2009, 04:05:24 PM »
 
 
Hi I'm trying to insert vids from YT but all I get is :

[yt=425,350]http://www.youtube.com/watch?v=qp6aZIhHiRE&feature=related[/yt]

How am I supposed to do this?




Admin edit: Title changed - Dougal
« Last Edit: April 13, 2009, 03:03:49 PM by Dougal »


In a world bereft of hope, lost to immeasurable inhumanity,   entrenched in commercial exploitation, devoid of hope, where's my underpants?

Offline Geoff Reid

  • Twitter: @Geoff_Reid
  • Active But Odd
  • Member
  • ****
  • Posts: 10109
  • Gender: Male
  • Bald as a chimps arse
Re: How Do I: Insert Video links into my posts?
« Reply #1 on: February 05, 2009, 07:58:06 PM »

I'll knock up a quick tutorial when I get home - unless someone else beats me to it!

Offline Geoff Reid

  • Twitter: @Geoff_Reid
  • Active But Odd
  • Member
  • ****
  • Posts: 10109
  • Gender: Male
  • Bald as a chimps arse
Re: How Do I: Insert Video links into my posts?
« Reply #2 on: February 06, 2009, 12:57:16 AM »
 
 
Okey dokey.

Firstly: Ignore the You tube Bulletin board tags available in the post editor by clicking the youtube button >. I have never made this work with you tube videos.

Secondly, you tube's video URL's (web addresses) can be confusing.  The top address marked 'URL' will usually look something like this:

Code: [Select]
http://www.youtube.com/watch?v=qp6aZIhHiRE

This URL will only work as a link to the desired youtube page, e.g: http://www.youtube.com/watch?v=qp6aZIhHiRE  they cannot be used to display a you tube video player on another website.

The information we need to be able to display the you tube player on another site, like Talkswindon, is partially buried in the 'EMBED' information which is available on the you tube page that carries our target video, (the video we want to share here), directly underneath the URL information.

The EMBED information will look similar to this:

Code: [Select]
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
The EMBED information is coded in HTML, (Hypertext Markup Language), and in its full form is intended for insertion in the source code of a web page. This is useless to us in its full form because Talkswindon uses PHP, or Pre Hypertext Protocol, which is slightly different to HTML.

So, what we do is cheat a little bit and make it easier for ourselves  :)  TS already is already equipped to play you tube videos, all we need to do is give the forum software two pieces of information about the video we want it to play.

Firstly, click the Flash video icon above the post editor, this places a pair of Flash BB tags, (bulletin board tags), in your post. They will look like this: 

Code: [Select]
[flash=200,200][/flash]
The 200,200 value determines how wide and high the player will be in your post. 200,200 is the default value, but we will change it to match the screen size of your chosen video. The screen size information is found in the first part of the EMBED information.

I have highlighted the screen size information in RED. We can see that the players width is 425 and height is 344.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Now replace the 200,200 default value in your bb tags, with the values given in the EMBED info:

Change the default:

Code: [Select]
[flash=200,200][/flash]
To become

Code: [Select]
[flash=425,344][/flash]

Next we need to tell our video player where to find the video. This is quite easy to find in the EMBED info because it looks like a normal URL, albeit with a little extra bit on the end:


Code: [Select]
http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1"

The URL we want will start at the  'http:' and finish at the  =1" We copy this URL and place it between the ] and [  symbols in our bb tags:


Code: [Select]
[flash=425,344]PASTE THE URL HERE[/flash]

When you have added the URL, the complete thing should look like this in your post editor:


Code: [Select]
[flash=425,344]www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1"[/flash]

When the above is posted, the following player appears when you preview or publish your post.  :)
 


<a href="http://www.youtube.com/v/qp6aZIhHiRE&amp;hl=en&amp;fs=9&quot;" target="_blank" class="new_win">http://www.youtube.com/v/qp6aZIhHiRE&amp;hl=en&amp;fs=9&quot;</a>



Experiment!, if you want a larger or smaller player, simply adjust the size values - some videos do look better smaller though:

Code: [Select]
[flash=850,688]http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=9"[/flash]

Becomes


<a href="http://www.youtube.com/v/qp6aZIhHiRE&amp;hl=en&amp;fs=9&quot;" target="_blank" class="new_win">http://www.youtube.com/v/qp6aZIhHiRE&amp;hl=en&amp;fs=9&quot;</a>

« Last Edit: February 06, 2009, 11:33:06 AM by Geoff Reid »

Offline Mart

  • Member
  • *****
  • Posts: 5249
  • Where's my cow?
Re: How Do I: Insert Video links into my posts?
« Reply #3 on: February 06, 2009, 12:05:25 PM »
Some of that is clearly made up, and there are at least three latin phrases and an ancient Celtic curse in there.

Dare you to repeat it in front of a mirror at midnight.

Wibble.

Doesn't shouting and pressing the keys really hard work?
Sometimes I think you have to march right in and demand your rights, even if you don’t know what your rights are, or who the person is you’re talking to. Then, on the way out, slam the door.

Offline Simon

  • Jnr. Jedi
  • Member
  • *****
  • Posts: 2274
    • Swindon Climate Action Network
Re: How Do I: Insert Video links into my posts?
« Reply #4 on: February 07, 2009, 07:24:21 PM »
Thanks Geoff. I was thinking of writing something similar myself, but you've saved me a job  O0

The only thing I'd add is...

Next we need to tell our video player where to find the video. This is quite easy to find in the EMBED info because it looks like a normal URL, albeit with a little extra bit on the end:

Code: [Select]
http://www.youtube.com/v/qp6aZIhHiRE&hl=en&fs=1"
The URL we want will start at the  'http:' and finish at the  =1"


Not quite... the only part of the URL you really need is the bit up to, but excluding, the first ampersand, in this case

Code: [Select]
http://www.youtube.com/v/qp6aZIhHiRE
Anything after the ampersand is additional formdata in the form of name-value pairs. I assume that &hl=en controls language settings, and I think the rest tells YouTube how you found the video. It'll work quite happily with or without the extra bits though.

You definitely don't want the quote mark at the end though. It probably won't stop the video working but it could cause all sorts of confusion to YouTube's internals.

Some of that is clearly made up, and there are at least three latin phrases and an ancient Celtic curse in there.


 :2funny: Sorry Mart, I guess you can add at least one latin phrase from my post. Pressing the keys really hard only results in a worn-out keyboard, and computers don't respond to shouting in the same way that people do.
We are all in this together, but some of us are more in it than others (with apologies to George Orwell)

Offline Mart

  • Member
  • *****
  • Posts: 5249
  • Where's my cow?
Re: How Do I: Insert Video links into my posts?
« Reply #5 on: February 07, 2009, 08:15:12 PM »
Yeah, you say that.

I'm obviously not shouting or pressing hard enough.

4lb clubhammer and a megaphone, Interweb and video insertion here I come.
Sometimes I think you have to march right in and demand your rights, even if you don’t know what your rights are, or who the person is you’re talking to. Then, on the way out, slam the door.

Offline Simon

  • Jnr. Jedi
  • Member
  • *****
  • Posts: 2274
    • Swindon Climate Action Network
Re: How Do I: Insert Video links into my posts?
« Reply #6 on: May 24, 2009, 11:37:56 AM »
It's worth noting that Geoff's tutorial also works for video content on other sites besides youtube. If the site gives you some "embed code" for putting the video onto your web site or blog, then you can put it on TS in the same way.

For example, here's a page with a video which Chav asked me to post this morning:

http://sendables.jibjab.com/view/gUVLfa1ba7yAO3Qa

This page contains the embed code:

Code: [Select]
<div style='background-color:#e9e9e9; width: 425px;'>
  <object id='A64060' quality='high' data='http://aka.zero.jibjab.com/client/zero/ClientZero_EmbedViewer.swf?external_make_id=gUVLfa1ba7yAO3Qa&service=sendables.jibjab.com&partnerID=JibJab' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' wmode='transparent' height='319' width='425'>
    <param name='wmode' value='transparent'></param>
    <param name='movie' value='http://aka.zero.jibjab.com/client/zero/ClientZero_EmbedViewer.swf?external_make_id=gUVLfa1ba7yAO3Qa&service=sendables.jibjab.com&partnerID=JibJab'></param>
    <param name='scaleMode' value='showAll'></param>
    <param name='quality' value='high'></param><param name='allowNetworking' value='all'></param>
    <param name='allowFullScreen' value='true' />
    <param name='FlashVars' value='external_make_id=gUVLfa1ba7yAO3Qa&service=sendables.jibjab.com&partnerID=JibJab'></param>
    <param name='allowScriptAccess' value='always'></param>
  </object>
  <div style='text-align:center; width:435px; margin-top:6px;'>Try JibJab Sendables®
    <a href='http://sendables.jibjab.com/ecards'>eCards</a> today!
  </div>
</div>

(I've added some whitespace to make it a bit more readable but it still behaves the same)

If the embed code contains a string like "<object" or "<embed" and also contains a string starting with "http://" and containing ".swf" then it's a shockwave flash video and the chances are you can embed it in a post at TS.

As with youtube videos, click the Insert Flash button to insert the template code:

Code: [Select]
[flash=200,200][/flash]

Pick out the URL from the embed code, the bit starting with "http://" up to the closing quote mark which indicates the end of that parameter - in this case it's http://aka.zero.jibjab.com/client/zero/ClientZero_EmbedViewer.swf?external_make_id=gUVLfa1ba7yAO3Qa&service=sendables.jibjab.com&partnerID=JibJab - and paste this URL in between the flash and /flash BB tags.

Finally, pick out the width and height from the embed code - this needs a bit of an educated guess, but a little bit of familiarity with HTML makes it easier. In this case the string "height='319' width='425'" contains these parameters. Replace the "200,200" in the BB code with the desired width and height (width first), or as Geoff says, experiment a bit with different sizes, and before you know it, you have the required BB code to embed your video:

Code: [Select]
[flash=425,319]http://aka.zero.jibjab.com/client/zero/ClientZero_EmbedViewer.swf?external_make_id=gUVLfa1ba7yAO3Qa&service=sendables.jibjab.com&partnerID=JibJab[/flash]

<a href="http://aka.zero.jibjab.com/client/zero/ClientZero_EmbedViewer.swf?external_make_id=gUVLfa1ba7yAO3Qa&amp;service=sendables.jibjab.com&amp;partnerID=JibJab" target="_blank" class="new_win">http://aka.zero.jibjab.com/client/zero/ClientZero_EmbedViewer.swf?external_make_id=gUVLfa1ba7yAO3Qa&amp;service=sendables.jibjab.com&amp;partnerID=JibJab</a>

Happy embedding  :)
We are all in this together, but some of us are more in it than others (with apologies to George Orwell)

Offline Simon

  • Jnr. Jedi
  • Member
  • *****
  • Posts: 2274
    • Swindon Climate Action Network
Re: How Do I: Insert Video links into my posts?
« Reply #7 on: January 06, 2011, 09:00:57 PM »
There's a newish site called xtranormal.com which allows you to create animations with speech synthesised from the text you enter. I haven't had much of a play with it, other than working out how to embed their videos here. As with other sites, it gives you a snippet of HTML code for embedding the video, and the challenge is to translate this into BB code which TS understands.

The example I'll use for this tutorial can be seen at http://www.xtranormal.com/watch/8218455 and provides the following embed code

Code: [Select]
<object width="480" height="390">
  <param name="movie" value="http://www.xtranormal.com/site_media/players/jwplayer.swf"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <param name="flashvars"value="height=390&width=480&file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4&image=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg&link=http://www.xtranormal.com/watch/8218455&searchbar=false&autostart=false"/>
  <embed src="http://www.xtranormal.com/site_media/players/jwplayer.swf" width="480" height="390" allowscriptaccess="always" allowfullscreen="true" flashvars="height=390&width=480&[color=red]file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4[/color]&image=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg&link=http://www.xtranormal.com/watch/8218455&searchbar=false&autostart=false"></embed>
</object>
<object width="480" height="390">
  <param name="movie" value="http://www.xtranormal.com/site_media/players/embedded-xnl-stats.swf"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.xtranormal.com/site_media/players/embedded-xnl-stats.swf" width="1" height="1" allowscriptaccess="always"></embed>
</object>

We need to extract 3 pieces of information from this - the height, width and video URL. The height and width are easy

Code: [Select]
<object width="480" height="390">

The URL is a bit more tricky. Unlike youtube where a single URL identifies both the video player and the video to be played, xtranatural.com has a URL for a generic video player, which then needs to be passed a parameter telling it which video to play. The video player's URL is held in this bit of the code

Code: [Select]
<param name="movie" value="http://www.xtranormal.com/site_media/players/jwplayer.swf"></param>

So that'll be http://www.xtranormal.com/site_media/players/jwplayer.swf then.

The parameters which are passed to this player are held in this bit of the code

Code: [Select]
<param name="flashvars" value="height=390&width=480&file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4&image=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg&link=http://www.xtranormal.com/watch/8218455&searchbar=false&autostart=false"/>

The value attribute is a series of name-value pairs in the form name=value&name=value and so on, so it resolves to

NameValue
height390
width480
filehttp://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4
imagehttp://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg
linkhttp://www.xtranormal.com/watch/8218455
searchbarfalse
autostartfalse

Now, exactly what each of these parameters does is something which only the developers at xtranatural.com are privvy to, but fortunately they've got sensible names, so it's a reasonable assumption that the one called "file" is the video which the player needs to play, and this assumption is backed up by the fact that the value of that parameter is a URL ending with ".mp4" (being one of the many video file formats out there).

The way to pass parameters to web pages is to append a question mark to the page's URL, followed by name-value pairs in the form name=value&name=value, so if we want the video player at http://www.xtranormal.com/site_media/players/jwplayer.swf to play the video at http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4 then the URL we need is

Code: [Select]
http://www.xtranormal.com/site_media/players/jwplayer.swf?file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4

Remember, the BB code for posting a video takes the form

Code: [Select]
[flash=width,height]URL[/flash]

So the BB code for this video will be

Code: [Select]
[flash=480,390]http://www.xtranormal.com/site_media/players/jwplayer.swf?file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4[/flash]

which gives us

<a href="http://www.xtranormal.com/site_media/players/jwplayer.swf?file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4" target="_blank" class="new_win">http://www.xtranormal.com/site_media/players/jwplayer.swf?file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4</a>

Or alternatively we could take all the parameters from the embed code rather than just the address of the video, which would give us

Code: [Select]
[flash=480,390]http://www.xtranormal.com/site_media/players/jwplayer.swf?height=390&width=480&file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4&image=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg&link=http://www.xtranormal.com/watch/8218455&searchbar=false&autostart=false[/flash]

<a href="http://www.xtranormal.com/site_media/players/jwplayer.swf?height=390&amp;width=480&amp;file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4&amp;image=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg&amp;link=http://www.xtranormal.com/watch/8218455&amp;searchbar=false&amp;autostart=false" target="_blank" class="new_win">http://www.xtranormal.com/site_media/players/jwplayer.swf?height=390&amp;width=480&amp;file=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.mp4&amp;image=http://newvideos.xtranormal.com/web_final_lo/af65e5ca-1741-11e0-821b-003048d6740d_61.jpg&amp;link=http://www.xtranormal.com/watch/8218455&amp;searchbar=false&amp;autostart=false</a>

which is a bit nicer because it gives us a static image of the video before we start playing it (probably due to the inclusion of the "image" parameter). No idea what the other parameters do at this stage... I encourage all readers to experiment with them, after all, that's how I learned most of what I know about IT matters.  :santa_smiley:


I hope people find this post useful, and yes, I need to get out more  :santa_rolleyes:
We are all in this together, but some of us are more in it than others (with apologies to George Orwell)

Offline Muggins

  • Member
  • *****
  • Posts: 8535
Re: How Do I: Insert Video links into my posts?
« Reply #8 on: January 07, 2011, 09:51:18 AM »
Aye???   I had one of those, but he leg dropped off - confounded me again Simon.  :santa_cheesy:
Oi! Listen mush. Old eyes, remember? I’ve been around the block a few times. More than a few. They’ve knocked down the blocks I’ve been around and rebuilt them as bigger blocks. Super blocks. And I’ve been round them as well.  The Doctor (Night Terrors)

Offline Mart

  • Member
  • *****
  • Posts: 5249
  • Where's my cow?
Re: How Do I: Insert Video links into my posts?
« Reply #9 on: January 07, 2011, 12:32:52 PM »
My eyes are bleeding.
Sometimes I think you have to march right in and demand your rights, even if you don’t know what your rights are, or who the person is you’re talking to. Then, on the way out, slam the door.

Offline Simon

  • Jnr. Jedi
  • Member
  • *****
  • Posts: 2274
    • Swindon Climate Action Network
Re: How Do I: Insert Video links into my posts?
« Reply #10 on: January 08, 2011, 05:54:18 PM »
Just read that post again, and yes, it's a bit on the technical side.

Fortunately there's an easier option for members to whom the above is all Geek, just post a link to the video's page and there's a good chance someone'll come along and do the technical stuff for you  :santa_smiley:
We are all in this together, but some of us are more in it than others (with apologies to George Orwell)

Offline Mellon

  • Member
  • *****
  • Posts: 1907
  • Gender: Male
  • Whatever it is , I didn't do it!
    • Mellons Blog
Re: How Do I: Insert Video links into my posts?
« Reply #11 on: January 08, 2011, 11:19:22 PM »
it is a good guide...... :santa_afro:

me playing black ops... :santa_azn:

DaMellon - Black Ops Game Clip Small | Large
"Duct tape is like the force. It has a light side, a dark side, and it holds the world together."

Offline Simon

  • Jnr. Jedi
  • Member
  • *****
  • Posts: 2274
    • Swindon Climate Action Network
Re: How Do I: Insert Video links into my posts?
« Reply #12 on: April 18, 2012, 09:08:51 PM »
OK, here's a question.

Now that youtube don't appear to offer the "old embed code" tick box on playlists any more, and it was that which I always used to construct the BB code to post my videos on TS, is there any way now of embedding a playlist of youtube videos on TS?

I can embed each video individually, as I did on the Eastcott ward hustings - video thread, although it seems that only 12 embedded videos are allowed per post.

This is the embed code which youtube gives me for that playlist, can anyone translate it into BB code?

Code: [Select]
<iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PL9C72342643AD3CD7&amp;hl=en_GB" frameborder="0" allowfullscreen></iframe>
We are all in this together, but some of us are more in it than others (with apologies to George Orwell)

Offline Geoff Reid

  • Twitter: @Geoff_Reid
  • Active But Odd
  • Member
  • ****
  • Posts: 10109
  • Gender: Male
  • Bald as a chimps arse
Re: How Do I: Insert Video links into my posts?
« Reply #13 on: April 19, 2012, 11:05:04 AM »

You tube have stopped using the old embed codes?

Offline Geoff Reid

  • Twitter: @Geoff_Reid
  • Active But Odd
  • Member
  • ****
  • Posts: 10109
  • Gender: Male
  • Bald as a chimps arse
Re: How Do I: Insert Video links into my posts?
« Reply #14 on: April 19, 2012, 11:27:11 AM »

Looking into it, although there may be a problem - doesn't look like there's going to be a decent replacement for the embedding mod we currently use. (The original coder has fallen out with the smf lot).

May upgrade this to a paid-for mod, but in the meantime I'm afraid you'll need to add them one at a time, 12 to a post :)

Offline Simon

  • Jnr. Jedi
  • Member
  • *****
  • Posts: 2274
    • Swindon Climate Action Network
Re: How Do I: Insert Video links into my posts?
« Reply #15 on: April 19, 2012, 08:33:30 PM »

You tube have stopped using the old embed codes?

Not entirely, the old embed code option is still available on individual videos, for the benefit of people with sites which don't use BB code, but on playlists the iframe is the only option.

The ability to create custom players, which is how I always used to present multiple videos, was taken away some time last year, with no replacement offered  >:(
We are all in this together, but some of us are more in it than others (with apologies to George Orwell)