Embedding YouTube video's in a website is very easy to do, and is basically a case of copying and pasting the embed code from YouTube into your project. Typically YouTube code can go in any styled text or HTML code region, within a page. However sometimes you may want to tweak the video presentation slightly and adjust the behaviour of the video player. For example, you may want to tweak the controller settings, make the YouTube logo more discrete, change the player colour scheme to match your RapidWeaver theme or display extra information before the video starts playing. Fortunately YouTube offers a fantastic API which enables us to leverage some of the customisable options and take full advantage of some excellent settings, which don't come with the standard embed code.

The uTube stack is a great introduction for anyone contemplating embedding YouTube video's within a website. Alongside basic options to choose the video and playback size, this stack hosts several other style and advanced settings. YouTube has recently grown to become an influential social media and networking channel online. Many individuals and businesses have taken advantage of the YouTube culture to engage with new people and promote themselves.

Example

Setup

1. Once installed, drag and drop the uTube Stack into your page.
2. In the uTube Stack settings on the right, type in the video ID. This is normally a random string of letters and numbers. Be sure to enter this carefully, taking care not to introduce any spaces or other special characters. If the URL of the video is something like this: http://www.youtube.com/watch?v=t4DXCx7qdEQYou would just type in the the ID code after v= in the URL. In this example, the video ID would be t4DXCx7qdEQ. Any other parameters after the ID which begin with an ampersand (&) character should be ignored.
3. From the dropdown menu, choose a size for your video. From this point onwards, the video should play fine after your export or publish the webpage. If there is a problem with the video ID you have entered (e.g. the ID is wrong, the video author forbids embedding or the video has since been removed) YouTube will display an appropriate error message in the player window.
4. Many other settings exist, enabling you to customise the style of the video player and tweak some of the functionality like the controller. If you hover your mouse cursor over each setting, it will display more details on what each option does.

Important! Often when you are testing YouTube video's offline, you must have your project running on a webserver, as the Flash or HTML5 players may restrict calls between local files and the internet. Typically you may see a "missing plugin" message or similar. It is possible to test projects offline using web sharing in System Preferences or by downloading and installing MAMP. Some of the features in this stack may not work with older video's. Likewise you may find some settings (such as the colour settings) automatically cancel-out other chosen settings like the reduced branding. Some web browser extensions like Incognito will block the embedded YouTube content and prevent the uTube stack from working correctly.

Source Code

YouTube video's can be easily embedded onto any RapidWeaver page using the following code snippet:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

Replace VIDEO_ID with the ID of the video you are seeking to embed. The YouTube video will play in HTML5 format if possible, and default back to Flash (SWF) in other instances. Here is a blog post on how to float a YouTube video (embedded using the above code) within an area of text.

This code can be saved as code snippets in RapidWeaver, for use in non-stack pages. To do this, highlight the code in your web browser and then right-click on it. Select Copy from the popup menu, to save it to your clipboard. In RapidWeaver, open the snippets window by clicking View > Show Snippets from the RapidWeaver menu. In the snippets window, click the '+' button, in the bottom left. Type a name for the new snippet and paste the code into the box shown. From this point onwards, you will be able to easily retrieve code snippets in RapidWeaver and reuse them in different pages. You can customise the code to suit your requirements.