Here are tips from YubaNet.com founder Pascale Fusshoeller from ReportingonHealth's webinar on how to embed multimedia content into your blog or website to boost reader engagement.
Useful URLs
Creative Commons – http://creativecommons.org
Flickr – http://www.flickr.com/
WikiMedia Commons - https://secure.wikimedia.org/wikipedia/commons/wiki/Main_Page
YouTube - http://www.youtube.com
Vimeo – http://vimeo.com
What is the Creative Commons license?
A licensing concept created by Creative Commons that builds upon traditional copyright practices to define possibilities that exist between the standard "all rights reserved" full copyright and public domain "no rights reserved". A Creative Commons license lets you dictate how others may use your work. The Creative Commons license allows you to keep your copyright but allows others to copy and distribute your work provided they give you credit and only on the conditions you specify. For online work you can select a license that generates "Some Rights Reserved" or a "No Rights Reserved" button and statement for your published work. (source: Creative Commons)
Embedding Images and Videos
Here are some ways to embed multimedia in your content using basic HTML code even if your content management system doesn't have templates for doing so.
Image Embedding – HTML
To embed an image that you uploaded to your site, use the following code:
<img src="file_location" align="left/right/center/" hspace="number of pixels (generally 5)" vspace="number of pixels (generally 5)">
Breaking it down
Here are some basic HTML codes that can help you to position your images.
img – tells your server that this particular piece of content is an image (.gif, .jpg, .png)
src – source, where the image is located on your server
align – to the left, right or in the center of your block of text
hspace – horizontal space between your image and the text
vspace – vertical space between your image and your text
ie. <img src="images/mypic.jpg" align="left" hspace="5" vspace="5">
Try it for yourself
The following tutorials are drawn from the W3 Schools Web Tutorial site.
Insert images from different locations
How to insert images from another folder or from another web site.
Aligning images
How to align an image within a text.
Let the image float
How to let an image float to the left or right of a text.
Make a hyperlink of an image
How to add a hyperlink to an image.
Create an image map
How to create an image map, with clickable regions. Each region is a hyperlink.
Video Embedding – HTML
Here are some tips and code for embedding videos in your content.
YouTube videos:
<object width="425" height="349" align="left" hspace="5" vspace="><param name="movie" value="http://www.youtube.com/v/QVjwszfa_1Q?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QVjwszfa_1Q?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>
In this example, you see two new parameters – height and width. You can select the size of a YouTube video on the video page. The system will generate the code for you automatically. All you have to do is add the alignment and the spacing (in bold in this example).
Note: If your CMS can handle iframes, use the generic iframe code. If you want finer control, select the 'use old embed code' option on the video's page.
Vimeo videos:
Same code options as YouTube.
From personal experience, I recommend uploading video to either YouTube or Vimeo and then embed from there. Having your videos accessible on either service will increase visitor traffic and not overload your own site in case the video is the latest YouTube sensation.