Embedding Video And Other Media

The "insert HTML code" button in the wiki toolbar enables you to insert any type of HTML code, which is particularly useful for directly embedding content from youtube, prezi, google maps, and numerous other websites.

To begin, click the "insert HTML code" button.

embed-code.png

The result will be the following code:

[[html]]
Insert any HTML code, including widgets and video or audio players
[[/html]]

Replace the middle text with the code provided by the website, which can be located with the following instructions. For a list of additional media supported by the wiki platform, see this page.

Video

YouTube

Click the button "embed code" beneath the desired video and copy the resultant text.

youtube.png

Please note that YouTube permits you to decide whether "related videos" will be shown in the window, and to customize the size of the video. A width not exceeding 600 pixels will most healthily fill the content window of your wiki.

youtubecustom.png

Return to Top

DailyMotion

Click the "embed" button beneath the video, and copy the text then appearing beneath the instructions "Copy Embed Code."

dailymotion.png

Please note that DailyMotion permits you to customize various options, such as text color and video size. A width not exceeding 600 pixels will most healthily fill the content window of your wiki.

dailymotioncustom.png

Return to Top

Vimeo

Click "embed" on the right-hand side of the video screen, and copy the text appearing beneath the instructions "Get the embed code."

vimeo.png

Please note that Vimeo allows you to customize various options, such as whether the video begins to play automatically and the video's size. A width not exceeding 600 pixels will most healthily fill the content window of your wiki.

vimeocustom.png

Return to Top

Blip.tv

Click the "share" button, which will expand to show an embed option. Click embed, and then click go. Copy the resultant text.

blip.png

If you have (or create) an account with blip.tv, you can click "edit player customizations" to bring up a window allowing you to alter various aspects of your video, including colors and size. A width not exceeding 600 pixels will most healthily fill the content window of your wiki.

blipedit.pngblipcustom.png

Return to Top

From File

First upload your video file to your wiki page. Then copy and paste the following code:

[[iframe http://snippets.wdfiles.com/local--code/code:video#example.url frameborder="0" scrolling="no" height="320px" width="440px"]]

You'll want to replace "example.url" in the above code with a link to your movie file. To do so, click on the "files" link at the bottom of your wiki page.

file-upload.png

Right-click or control-click on the name of your movie file, and select "copy link" from the pull-down menu. Now replace "example.url" in the above code with this copied text.

Return to Top

Audio

You can embed a simple audio player on your wiki page to play audio files uploaded to your wiki page. If necessary, follow the instructions for uploading files.

Next, access the files section of your wiki by clicking on the "files" link at the bottom of the page.

file-upload.png

Right-click or control-click the desired file, and select "copy link" from the pull-down menu.

Insert the following code into your wiki page, replacing "http://example.mp3" with the link copied in the last step.

[[iframe http://snippets.wdfiles.com/local--code/code:mp3#http://example.mp3[!----] frameborder="0" scrolling="no" width="320px" height="40px"]]

The audio player will look like this:

If you would like your audio file to begin playing automatically, instead use the below code, once again replacing "http://example.mp3" with your copied link:

[[iframe http://snippets.wdfiles.com/local--code/code:mp3#http://example.mp3#autoplay frameborder="0" scrolling="no" width="320px" height="40px"]]

Return to Top

Google Maps

Click the button with the link icon in the upper left-hand corner of the map as shown in the image below, and then select and copy the text in the field labeled "Embed."

new_map.png

Please note that Google allows you to customize the size of your map if you click the "Customize and preview embedded map" link.

custom_map.png

Your available options look like the following window, which allows you to specify size. A width not exceeding 600 pixels will most healthily fill the content window of your wiki. You will find the HTML code determined by your options in the bottom of the window, in the area indicated by the arrow.

custom_map_options.png

Return to Top

Google Books

Click the button with the link icon in your toolbar, and copy the text appearing below the header "Embed" as indicated by the arrow in the following image. Note that this link will direct you and/or your user to the page currently displayed in the book.

books_embed.png

Return to Top

Google Docs

Spreadsheet

From the "File" menu in your toolbar, select "Publish to the web."

spread_publish.png

In the pop-up window, click the "Start publishing" button. Note that you have the opportunity to select which sheets of your spreadsheet will be included.

spread_start.png

You will now find the bottom portion of the pop-up window to be activated. From the pull-down menu beneath "get a link to the published data," select "HTML to embed in a page," and then copy the resultant text.

spread_html.png

Return to Top

Document

When you click on the "File" menu in your toolbar, you may find that you first need to select "Edit online" to convert your document into a format that Google can publish.

doc_online.png

Once you have done so, you can select "Publish to the web" from the "File" pulldown menu.

doc_publish.png

In the pop-up window, click the "Start publishing" button.

docs_start.png

The window will now expand to include a lower portion with the header "Get a link to the published document." Copy the code displayed in the box beneath the title "Embed code."

docs_embed.png

Return to Top

Prezi

Click the "embed" link below the presentation, and copy the text appearing beneath the header "embed code."

prezi.png

Note that Prezi permits you to customize the size of the embedded presentation. A width not exceeding 600 pixels will most healthily fill the content window of your wiki.

prezicustom.png

Return to Top

Slideshare

Click the "embed" link in the toolbar above the presentation, and copy the text appearing beneath the header "embed this document."

slideshare.png

Return to Top

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License