IAC logo The world of non-commercial film and
A-V making 		Events Diary Search
The Film and Video Institute find us on facebook Join us on Facebook

 

Introduction | Downloading Super© | Using Super© | Uploading

Embedding your online video on a website

Once your video is online, look for options to allow "embedding". If they are turned off ... turn them on.

For our purposes allow public access. Some video hosts give you the options to let people comment on or vote on your movie. These may be less valuable and we suggest you say no to them. Silly comments are commonplace and sometimes upsetting.

When you watch your movie online look around for the word "embed" or "share". Try right-clicking on the movie. Clicking that link will present some odd looking code. This code is what webmasters need to let people watch your film on their website.

Focusing on YouTube ...

Most video hosts have privacy options so that you can, for example, upload a movie and only allow your friends or family to watch it. Geoff Harmer used such a facility when adding music to his successful film Overtime. Only the composer, working in another country, had access to the rough-cut film. Later Geoff uploaded the complete movie and made it public.

YouTube's volume control.
Click on this to adjust the soundtrack volume.		 Youtube's choice of quality options.Youtube resolution button.This tells you what resolution you are currently watching. If there is a triangle showing click it and you will see a range of qualities, click on the one you wish to watch. The Youtube swap button.
Click this to expland the picture and hide the other films shown on the right.		 Youtube full-screen button.
Click this to make the picture fill your whole screen. At lower resolutions this can look rather "blocky" but it works well at higher ones.
The YouTube embed button. The "Embed" button is below the lower-right corner of the picture, just beneath the counter showing how many times the film has been viewed.

Click it and a line of code appears in the space below.

If high quality video is available a range of other options appears:
The Youtube embedding options panel.

Other video hosts offer some similar choices, but few give so many options as this.

 You only see part of the code in the space for it, but clicking in that space selects all of the code.

Click in the squares to choose other options like whether you show people related videos and so on. The only one we recommend you consider is the last one.

If the movie is available in HD tick that box. The code will change ... if you look at the picture you will see the width set to "1280" and height to "745" ... the extra height is to allow room for the play/pause controls.

Webmasters and the Embedding Code

Every web page consists of letters and numbers with occasional links to pictures. These days most webmasters use a program which lets them see the finished effect without worrying about the code underneath. But there is always a way of viewing the code.
Choose where on your page you want the video to appear. Copy the embedding code from the video host website and paste it in the code for your web page at that point.
Many webmasters find it helpful to put a table on the page, type an X into one cell of the table ... then look at the code view of the web page ... find that X and replace it with the embedding code. Fill the other cells of the table with text ... then make the table borders size "0".
X

This is a sample of YouTube embedding code:

<object width="480" height="385">

<param name="movie" value="http://www.youtube.com/v/PUDtAmI8024&hl=en_GB&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/PUDtAmI8024&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>

</object>

This is a sample of Vimeo embedding code:

<object width="400" height="300">

<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2415381&amp;
server=vimeo.com&amp;show_title=1&amp;
show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=2415381&amp;
server=vimeo.com&amp;show_title=1&amp;
show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed>
</object>

<p><a href="http://vimeo.com/2415381">THE DRILL</a> from <a href="http://vimeo.com/user943311">bob lorrimer</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

[The last section after the </object> code, presents text below the video, which we suggest you might delete when embedding.]

width and height - we show these in bold red type here for clarity - they indicate the size the movie will appear on your website. The height is  sometimes a few pixels more than you might expect, but this is to allow for the playback controls on the display. The YouTube example is 4:3 and the Vimeo example is 16:9 aspect ratio.

You can change these figures provided you keep the right ratio and change both proportionally. Thus width="480" height="384" might become: width="360" height="288"  to reduce the picture size to 75% of the width and of the height.

Screen shot of an embedded video seen in a web editor program. The resulting web page may look a bit strange in your web creation program (see left) but once online and seen in a browser (right) the code links up with the video host and pops the video onto the page.

Best of all: it works as if you had cut out a rectangle in your web page and let people see the video running underneath it. The storage and web traffic overhead costs fall on the video hosts and not on your website.

The Good News

Any standard definition movie under 9 minutes can easily go online. For longer work some compression is required but that is not too difficult. Let's see more and more of our work on the web.

 The embedded video as seen in a browser.

Audience silhouette. Audience silhouette.
Page updated on 20 January 2011       find us on facebook Join us on Facebook       UNICA information UNICA member
Company Limited by Guarantee No. 00269085. Registered Charity No. 260467. Authors' views are not necessarily those of the Institute of Amateur Cinematographers. Website hosted by Merula. JavaScripts by JavaScript Source. Menu by Live Web Institute. Art work by Miss Jo Black.