How can I embed YouTube, Vimeo or other video sharing code into my website?

To embed YouTube, Vimeo, Animoto or other videos from similar sites, please follow these instructions:
  1. Add a Text/HTML asset to the page you want to place the video in
  2. Click the Source button on the editor to put it into HTML view mode
  3. Copy the Embed code provided by the video sharing site
  4. Paste the Embed code into the text editor (if placing a video in and amongst other copy on the page, you will need to insert your cursor at the spot in the code where the video should go before pasting)
  5. Press the green Update button to save your changes
Important Note:
In some browsers Flash content will always appear above your drop down menus in your website or over the buttons in the BBB admin, rendering them useless. It is highly recommended that you perform this next step to prevent this from happening:

Examine the supplied code to see if:
<param name="wmode" value="opaque" /> and wmode="opaque" are present.
If they are then you should be OK.

If they are set to something else like:
<param name="wmode" value="window" /> and wmode="window" , then you should change it to read opaque.

If they are not present then you should add them in. Below is a before & after example which should show you where they go:

Before:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="360" id="vp1hUTm3" width="648">
<param name="movie" value="http://www.someurl.com" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
 
<embed allowfullscreen="true"
allowscriptaccess="always"
height="360"
id="vp1hUTm3"
type="application/x-shockwave-flash"
width="648"
</embed>
</object>

After:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="360" id="vp1hUTm3" width="648">
 
<param name="movie" value="http://www.someurl.com" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
 
<embed
allowfullscreen="true"
allowscriptaccess="always"
height="360"
id="vp1hUTm3"
type="application/x-shockwave-flash"
width="648"
wmode="opaque"
</embed>
 
</object>

 
YouTube now supplies new code in an iFrame. This too should be modified as follows.

Before:

<iframe width="640" height="480" src="http://www.youtube.com/embed/vS1Mw1Adrk0" frameborder="0" allowfullscreen></iframe>

After:

<iframe width="640" height="480" src="http://www.youtube.com/embed/vS1Mw1Adrk0?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Add Feedback