Embedding Video

This is an advanced task for contributors who are comfortable with simple HTML. If you're not comfortable with HTML, feel free to contact the Web Team and ask us to embed the video for you.

What is Embedded Video?

"Embed" means "placed inside," rather than "linked to." You can see an example of an embedded video on the APS.edu homepage:

See how the video is actually on the page? That's embedded.

Hosting the Video

Embedded video is not saved on the APS.edu website. Instead, it is stored at a video hosting website like Vimeo or YouTube. We prefer Vimeo because it is not blocked at our schools like YouTube is.

You have two options for hosting your video:

1. Use the general APS Vimeo account by contacting the Web Team.
2. Register your own Vimeo account. Here's how:

• Visit http://vimeo.com/join and sign up for a BASIC account
• Use general information as much as possible (so register it to ARTSCenter, rather than JanDelgado, for example, and choose a password that you can share with other staff in your department and the Web Team, in the event that you need help troubleshooting).
• It’s ok to associate the account it with your email address, but if you have a general department email address that you can use, that would be even better.

Let's do it!

Ok, ready?

1. Upload your video to your new Vimeo account, or get confirmation from the Web Team that we have uploaded your video to the general APS Vimeo account. Make sure that the video is available to the public by ensuring that you can view it even when you're not logged in to your Vimeo account.

2. Go to the video in Vimeo and click the EMBED button:

3. In the screen that pops up, highlight and copy the code that looks like this:

<iframe src="http://player.vimeo.com/video/19408391?byline=0&amp;portrait=0&amp;color=ff9933" width="400" height="300" frameborder="0"></iframe>

4. In Plone, go to the page where you want the video to appear. Make sure you're logged in.

5. Look at the words that are used just above and below the place where you want to see the video. You'll look for these words in the HTML in step 8. In my case, I want to place this video just below the headline "Mountain or Neutral Pose" and the text "See a video example" so I'm going to commit those words to memory so that I can look for them in the HTML in step 8.

6. Click Draft Changes.

7. Click the HTML icon.

8. Here's the tricky part. In the HTML that appears, locate the place on your page where you want to place the video. Look for the words you committed to memory in step #5. Here are mine:

9. Place your cursor where you want the video to show up, and either press Ctrl-V to paste the embed code, or right-click and select Paste to add the code:

10. Your pasted code should look something like this. Click update.

11. The HTML window goes away, and the screen refreshes to show you a big, blank space where your video will go. It's hard to do, but trust that it's there. Here's how mine looked:

Scroll down and click Save.

12. The screen refreshes to show you your page. You should see your video where you placed it. Here's mine:

Congratulations! Your video is now embedded.

Don't forget to Publish or Submit for Approval so you can share it with the world!