How to embed a YouTube video into the Surefire content management system


Putting a YouTube video into a page on your website using the Surefire Design content management system isn’t particularly difficult, but you need to take a little care…


Note: we have just added the blog post How to embed a google map into the surefire content management system. This article is suspiciously similar!! The process is exactly the same.


Sign up for a free YouTube account at, and follow their instructions to upload your clip.


Then browse to your clip in YouTube. You will see (for all clips on YouTube) there is a field called Embed. This has the code in it that we want to copy and paste into the editor.


There are all sorts of setup options these days, colours, sizes, players, borders etc. But the simplest is to select the code in the Embed box and copy.


Embed code


Open the page in the WebStart editor.


In the spot where you want to put the video, type something you will recognise… personally I type *******.

Stars in text


Then click on the ‘Source’ button on the toolbar. This will show you the actual html code for the page.


Source button


VERY CAREFULLY look through the html code for the ******* you typed. Delete the *s and making sure the cursor is in the right place, right click and select paste. This will drop in the code you copied from YouTube.


Stars in source code

Video code in source code


Press the ‘Source’ button again to get back to the usual view. You should see the video embedded in the content now! If it isn’t… do NOT save the page. Go out and start again.


Video in content



Cropping Images to a Specific Ratio – not intuitive sadly.


Cropping images to a certain ratio is not the most intuitive thing to do. It is something you need to understand by doing, so follow these steps carefully a few times and hopefully it will become second nature!


These instructions are for taking an image and cropping it to fit a specific retangle size/ratio. For instance you might want a batch of images to all end up with equal height thumbnails…


If you don’t have some fancy/expensive graphic design program – here is the manual way using the free FastStone Image Viewer (download here) (check out our FastStone review in this blog).


This example is to crop the image to fit into a 300 x 450 thumbnail.


Open FastStone Image Viewer


Through the folder/file listing browse to the images you want to work with.


File select

Click on the image you want to work with, a blue line will appear around it.


On the tool bar click on the resize button.


In our example, set the height to 450 pixels. IF this makes the width LESS than 300px, set the width to 300px instead (the height will be greater than 450px). Then press OK.


Image resize


On the tool bar click on the crop tool. This opens the image in a window.


Drag the cursor to select the cropping area. Watch the width and height dimensions change in the footer, keep going until they read 300 x 450. You can then move this crop area around on the image to select where it will crop. Then press Crop.


Image crop selection


The image is now cropped to 300 x 450. Select File->Save As or click on the save button on the tool bar.


Save the new version of the image with a file name like andrew_300x450.jpg so it can be recognised.


Really there is a little trial and error in this until it makes sense. Just remember not to save over the original file and you can always start again!