Forums
  Forum->Using CrossroadsAngel.com->Embed a YouTube or Vimeo Video
There are three areas on CrossroadsAngel.com where you can embed YouTube or Vimeo video into a text entry field:
1) The "About Me" area in the Role specific section of your profile
2) The larger unlabeled rich text description area at the bottom of the role specific area of your profile
3) In a blog

Like many other websites, CrossroadsAngel.com uses a software filter on contributed content to delete code that could compromise the website and member privacy. The way that YouTube, Vimeo and others encode their videos for embedding into other websites is to use an HTML object tag. Other uses for that tag could compromise security, so I've added code to the basic filter to "whitelist" the use of the Object tag from those specific websites.

As an example I'll walk through how to embed a YouTube video into your "About Me" description. Let's use the video at http://www.youtube.com/watch?v=D8UNRiIhGS4 . You will notice that to the right of the video is a little box with the poster's YouTube ID, the posting date and a yellow "Subscribe" button. Just below the video description in that box is a field with the label "Embed". The text inside of that field is what goes into your "About Me". That text starts with "<object width=..." and ends with "<object/>".

Just below the embed field is a set of options that you can use to customize the video. Many, but not all, of those options are acceptable to the filter I've implemented.

Copy the embed text string and go to your CrossroadsAngel.com profile for the next step.

If you're logged in to your profile you'll see the text "Edit" at the bottom of the "About Me" section for the role that you've selected. BTW, the "About Me" and bottom description areas, as well as the playlists are specific to that role. Each role may have those items set in different ways. Click on "Edit" to go to the "Edit Description" form.

It's worth pointing out that there are many options for formatting the text available through the format button menu. A good rule of thumb is that keeping it simple is better. Cautionary examples of overdoing the formatting can be seen with almost any MySpace page. It is possible to mess up the formatting of your profile by going crazy with custom formatting or embedded pics.

For those of you familiar with web development environments, you may notice that we use FCKEditor, now CKEditor, as our rich text input editor.

One common issue to be addressed is that when cutting and pasting from a Windows environment, extraneous HTML text will often be put into the document. This is most common when cutting / copying from Word or Outlook. This text is not necessary and may keep you from creating the format you really want.

To keep this extraneous text from being entered during the paste half of the operation, click on the button that looks like a clipboard with a "T" in front of it. Clicking on that button brings up the "paste as plain text" form. Paste your cut/copied text from YouTube into that form and click on "OK".

You will now be back in the "Edit Description" form and will see the video embed string. Feel free to write around this string, but unless you know what you're doing it would be a good idea to leave the embed text string alone.

Once you click on the "Submit" button, you should see your Profile page with the video in the About Me area.

Additional notes:
* I've limited the size of the video to the maximum that reasonably fits into a blog, About Me, or bottom role description section. You can adjust the video size up to those limits
* If you want to embed videos from other websites let me know. I have to create a filter specific to each added website, but it doesn't take me long to do. Send requests to admin@crossroadsAngel.com or message me via my profile.
* If you want to use additional attributes that the filter currently strips out, let me know. Send requests to admin@crossroadsAngel.com or message me via my profile.
* I have added code to the filter that enables you to see the full tag for subsequent re-editing. To see all of the HTML code, click on the "Source" button at the top left of the edit form button menu.
* For anyone looking to do the same type of whitelist filter, I'll post the code soon to a publicly available website. I'll come back here and provide the link once I've done that. For now, you can always send me a note directly to get the info
Comments Comments Per Page:
There is no message in this Thread.
Page No :
Reply Type :
Message :