A8 Add videos, Soundcloud, Google maps and more
Download PDF Version
1. Introduction
It’s really easy to add You Tube videos, Soundcloud tracks and Google maps to just about anywhere on your website (not to mention content from various other sites such as Disqus, Photosynth, etc). The general principle is that you obtain a code from them which you copy into your admin system (known as 'embedding'). You can have as many as you like and put them just about wherever you want. In these examples, we have inserted a Single Page section and entered the codes in either the Intro or the Main text field.
2. Videos
2.1 How to do add a You Tube video
Go to the video in question on You Tube.
Right click on the video itself.
Left click on Copy embed html. Copy the blue highlighted code by right clicking and selecting Copy.
Paste this into a text field in your admin system (just right click in the admin system and left click Paste). This can be just about anywhere in your admin system, although we would generally use it in the main text field of a Single page section.
In the row above this, insert the code <html>.
And at the end, </html>.
Update your record and Preview in the usual way. That's it!
Don’t be overwhelmed by the code, as it is all done by You Tube. All you have to do is make sure you enter <html> at the start and </html> at the end!
2.2 Change the video dimensions
That said, you can change the width and height the video appears on your website. Just overwrite the width=“854” and height=“510” part of the You Tube code with whatever you want, eg width=“427” and height=“255”. However, we would recommend you keep the same ratio and resist the temptation of going too large. And watch out you don't insert a space or other character by mistake!
2.3 Adding more than one video to a page
In this example we have added four videos to the page. All we’ve done is repeated the process above four times, each time having entered the coding one after the other (with no returns after each one, just a space). You’ll need the and tags included for each of the four videos. We’ve also reduced the width and height of all the videos by half so they can fit in.
3. How to add Soundcloud tracks
These work in a similar way to videos but for audio files and are therefore perfect for our musican customers:
Go to the audio track you would like to feature at Soundcloud.
Left click on the Share icon in the bottom right Then click on Embed at the top.
Left click on the code that has been generated so that it is highlighted and then right click to copy it.
Paste this into a text field in your admin system (just right click in the admin system and left click Paste) In the row above this, insert the code And at the end, . Save the record.
That's it!
You can also change the dimensions it appears on your site by editing the code. For width, simply amend width="100%" to a different %. For height amend height=“450” (which is pixels) to whatever you require.
4. Adding Google maps
This also works in a similar way:
Go to Google maps and find the map you would like to use.
Left click on the menu in the top left (the three horizontal lines) and then click on Share and embed map Then click on Embed map.
Left click on the code that has been generated so that it is highlighted. Right click and then left click on Copy.
Paste this into a text field in your admin system (just right click in the admin system and left click Paste) In the row above this, insert the code And at the end, . Save the record.
Again, you are able to change the size it appears on your site by editing the width and height in the code provided.
5. Other content you can embed
Don't forget there are other sites where you can embed content from such as Disqus and Photosynth. All you need to do is find the embed code on them and copy it into the admin system.
flickr galleries work slightly differently. You can add these without affecting your image allowance with us, although you will lose functionality such as Ecommerce and 'Comments'. This is covered in Cliktips Guide A7 Adding a Flickr gallery.
