How to Embed a Video Into Instructables

19,059

31

68

Introduction: How to Embed a Video Into Instructables

About: Eric J. Wilhelm is the founder of Instructables. He has a Ph.D. from MIT in Mechanical Engineering. Eric believes in making technology accessible through understanding, and strives to inspire others to learn …
It's super easy for Google video, Yahoo! video, Metacafe, Brightcove, Revver, Blip.tv, and YouTube!

Put the URL of the video into our Video function inside some square brackets like this:
[[Video(http://www.youtube.com/watch?v=woxc2eIedlM) ]]
The video will appear in the text section of your Instructable's step. You can adjust the size of the video by doing this:
[[Video(http://www.youtube.com/watch?v=woxc2eIedlM, {width:500, height:400} ) ]]

You can also use the tool bar above most text boxes. Click the video button and drop in the URL of the video. Use the URL that takes you to the actual page on the video site with your video, not any special "embed this" URL. We'll take care of all the processing!

**Check out step 2 to see how you can get the correct embed for Blip.tv - the process is a little less intuitive than with YouTube, but it's still pretty simple.**

Step 1: The Video

Here, I embedded the video from the 1D Accelerometer by intoon

Example:
[[Video(http://www.youtube.com/watch?v=woxc2eIedlM, {width:500, height:400})]]
Display:


And, here I embedded the video from the 3D chocolate printer by saul

UPDATE 5/14/07: Yahoo Video has changed, and is slightly less easy to embed.

To include a yahoo video, you'll need to compose a URL. This is done by taking the first part of the yahoo video URL
http://video.yahoo.com/video/play?vid=
and appending the vid, which is not the same vid found in the original URL. That will not function externally. To find the real vid, you need to copy out the embed code, found below the video. In this case, it looks like this
<embed src=&aposhttp://us.i1.yimg.com/cosmos.bcst.yahoo.com/player/media/swf/FLVVideoSolo.swf&aposflashvars=&aposid=598437&emailUrl=http%3A%2F%2Fvideo.yahoo.com%2Futil%2Fmail%3Fei%3DUTF-8%26vid%3D54937&imUrl=http%253A%252F%252Fvideo.yahoo.com%252Fvideo%252Fplay%253Fei%253DUTF-8%2526vid%253D54937&imTitle=Lego%2Bchocolate%2Bprinter&searchUrl=http://video.yahoo.com/video/search?p=&profileUrl=http://video.yahoo.com/video/profile?yid=&creatorValue=ZXJpY2p3aWxoZWxt&vid=54937&apos type=&aposapplication/x-shockwave-flash&apos width=&apos425&apos height=&apos350&apos></embed>
The real vid is found after the text "flashvars='id=", or in this case 598437. Add that to the back of the URL to get:
http://video.yahoo.com/video/play?vid=598437
and then use the video embed like normal. In this case we have
[[Video(http://video.yahoo.com/video/play?vid=598437)]]



Here I embed some video from Google video

[[Video(http://video.google.com/videoplay?docid=-1300191479870868157&q=how+to+cut+wood, {width:400, height:300})]]



Here I embed aMetacafe video,

http://www.metacafe.com/watch/445498/robotic_beer_launching_refrigerator/

[[Video(http://www.metacafe.com/watch/445498/robotic_beer_launching_refrigerator, {width:400, height:300})]]



Embedding a video from Brightcove is really easy to do as well. You just take the link that Brightcove gives you when you click on "link directly to this video" and paste it into the input video bar on instructables.

Here is the link for the "Twilight Zone" Lighter Trick on InstructablesTV.

http://www.brightcove.com/title.jsp?title=494918786

If I put that same text into the video bar I get the following video:



Step 2: Embed a Video From Blip.tv

To embed a video from blip.tv, first upload a video to you blip account. Blip.tv automatically creates a flash version of any video you upload. The conversion can sometimes take a minute, so wait until it finishes or else you won't be able to embed the correct code.

Once you have a .flv version of your video available, click on the "share" button below your video. A windows will open up in the tab below. Select "MySpace" from "Where do you want to put the video."

Scroll down to where it says "Copy the HTML below to paste into MySpace".

The embed is the long line of text that starts immediately after the letters:

src="

Copy everything after the first quotation mark including, but not beyond the extension:

.flv 

So Blip.tv gives you the entire embed of:

<embed wmode="transparent" src="http://blip.tv/scripts/flash/blipplayer.swf?autoStart=false&file=
http://blip.tv/file/get/InstructablesTV-CanKnifeOpen517.flv%3Fsource
%3D3" quality="high" width="320" height="240" name="movie"
type="application/x-shockwave-flash"pluginspage=
"http://www.macromedia.com/go/getflashplayer"></embed>

but the part that the instructable needs is only:

http://blip.tv/scripts/flash/blipplayer.swf?autoStart=false
&file=http://blip.tv/file/get/InstructablesTV-CanKnifeOpen517.flv

If you paste that text into the video field on instructables, ie, this:

[[Video(http://blip.tv/scripts/flash/blipplayer.swf?autoStart=false&file=http://blip.tv/file/get/InstructablesTV-CanKnifeOpen517.flv, {width:320, height:240})]]

  • note, there should be no line breaks in the above code, so if you just copy & paste, make sure it is all on one line without any spaces.

you should get a nice flash version of the player and video like this.


Step 3: Embed a Video From Revver.com

Embedding a video from Revver requires a bit of URL hacking, but it's possible.

First, go to the the appropriate video page, and select "Grab Code". Then under format, choose "Flash Embed" and copy out the text that appears in the text box above.

In this case, we get:

<embed type="application/x-shockwave-flash"src="http://flash.revver.com/player/1.0/player.swf"pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noScale" salign="TL"bgcolor="#000000" flashvars="mediaId=218941&affiliateId=0&allowFullScreen=true"allowfullscreen="true" height="392" width="480"></embed>

What we need to do from this is re-create an flash embedded url. So we'll take the link after "src", which is:
http://flash.revver.com/player/1.0/player.swf
and append a question mark and the mediaId, which in this case is 218941, resulting in:
http://flash.revver.com/player/1.0/player.swf?mediaId=218941

Now we need to trick Instructables into thinking this is a flash video, so we'll take the link above, and ad a "&.swf" to it, resulting in:
http://flash.revver.com/player/1.0/player.swf?mediaId=218941&.swf

Then one can use our normal video dimensions, but I'd recommend Revver's default width and height, 480x392. The resulting code is:
[[Video(http://flash.revver.com/player/1.0/player.swf?mediaId=218941&.swf, {width:480, height:392})]]

Which can be seen below:


Be the First to Share

    Recommendations

    • The 1000th Contest

      The 1000th Contest
    • Battery Powered Contest

      Battery Powered Contest
    • Hand Tools Only Challenge

      Hand Tools Only Challenge

    68 Discussions

    0
    HowToEngineer
    HowToEngineer

    3 years ago

    I do not see most of the videos any more. Is this no longer up to date? This would be an incredible instructable to have up to date!

    0
    yourcelf
    yourcelf

    11 years ago on Step 3

    You can embed Vimeo videos in Instructables as well (I searched for a long time to find this).
    1. Get the full URL for the Vimeo player -- click the "embed" link and find the URL that looks like:
    http://vimeo.com/moogaloop.swf?clip_id=......fullscreen=1

    2. Add "&.swf" to the end to convince Instructables that it's a video.
    http://vimeo.com/moogaloop.swf?clip_id=......fullscreen=1&.swf

    3. Use the video tag as described above. The default size for Vimeo is {width:400, height:300}.

    0
    Phil B
    Phil B

    Reply 7 years ago on Introduction

    I tried this and all sorts of other suggested methods with no success. I am going for a step-by-step with an embedded URL link to go to the video at Vimeo.

    0
    babybayrs
    babybayrs

    7 years ago on Introduction

    I tried to embed video in a step-by-step Instructables, by copying the Youtube video URL to the brackets, but it didn't seem to work. Can anybody see how I should do it over here: https://www.instructables.com/id/Tricolor-tortellini-filled-with-mushroom/

    0
    MidnightMaker
    MidnightMaker

    Reply 7 years ago on Introduction

    I found this Instructable. Tried it out on a new 'ible I'm busy with and it worked just fine: https://www.instructables.com/id/How-to-embed-a-video-on-Instructables/

    0
    babybayrs
    babybayrs

    Reply 7 years ago on Introduction

    You are so kind to leave the link which does work. I just embedded a video in my latest instructables.
    Thanks a lot!

    0
    james.mcglashan

    can there please be how to embed the jw player as this should work


    <script type='text/javascript' src='swfobject.js'></script>

    <div id='mediaspace'>This text will be replaced</div>

    <script type='text/javascript'>
    var so = new SWFObject('http://jamesm.com.au/player/player.swf','mpl','555','300','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addParam('wmode','opaque');
    so.addVariable('file','http://jamesm.com.au/player/play.xml');
    so.write('mediaspace');
    </script>

    0
    Derin
    Derin

    11 years ago on Introduction

    I think the video system works with all flash.I put CP as a test now.

    0
    Plasmana
    Plasmana

    12 years ago on Introduction

    I am having some problems, I cannot change the size of the you tube video, what did I do wrong?

    0
    knex maddo
    knex maddo

    12 years ago on Introduction

    how do you add your own one from windows movie maker? please reply A.S.A.P thanks

    0
    xACIDITYx
    xACIDITYx

    12 years ago on Step 3

    LOL! I loved that show. Thanks for the info, Eric.

    0
    bluesman
    bluesman

    12 years ago on Introduction

    Hey, the metacafe videos don't appear embedded anymore!

    What happened? Any ideas?

    0
    demer98
    demer98

    12 years ago on Introduction

    Great site... hm, i'm kinda new....i need help please can anybody tell me how to add text on youtube video? thank's

    0
    trebuchet03
    trebuchet03

    14 years ago

    another test....

    <font color="blue">This might be blue</font>
    0
    trebuchet03
    trebuchet03

    Reply 14 years ago

    @llama13

    yes, you can do custom color ;)

    <table border="0" bgcolor="black"><tr><td><img src="http://i11.photobucket.com/albums/a166/Trebuchet03/P1020697Small.jpg" hspace="10px" vspace="10px"></td></tr><tr><td><font color="white">Yet another Mystery Machine</td></tr></table>
    0
    Derin
    Derin

    Reply 12 years ago on Introduction

    <font color="red">well well well written with blood</font>

    0
    Derin
    Derin

    Reply 12 years ago on Introduction

    <font color="red"> well well well written with blood </font>

    0
    trebuchet03
    trebuchet03

    Reply 14 years ago

    before I go any further.... let me know if you intended to use this feature this way... I like being optimistic... but as a webmaster, I would not want this because of stupid skiddies and other 'evil' purposes.