Video Demos
Along with serving as a demo of embedding video in a CSS-styled iframe (see the code and comments in the source of this page), this first video is a talk that Web design majors should listen to on a rainy day -- or when they take a Friday off from class and have an hour on their hands. Unlike more common TV-style videos, it is a "screencast" -- a screen recording of a slide show accompanied by the audio of a conference speech.
( The text of her talk is also available for reading and printing.)
The presenter is Elika J.
Etemad of Mozilla, also known as
"fantasai," a member of the CSS Working Group.
She made this presentation to a conference in April 2012, under the title
"The Evolution of CSS Layout, Through CSS3 and Beyond."
Why you should watch it: Web design majors should know where the
technologies you use came from --
and are going to, so watch this video! She also gets
to her personal experience becoming involved with the standards group,
which puts a human face on Web standards, obsessions and careers.
This rest of this page is a demo of other sites that allow you to use their video-player code with your own video -- or with clips from their archives. You can embed media players in your own HTML pages, or with special functions in content management systems like Wordpress: Another demo.
The simplest way is to use YouTube, which is now owned by Google. A Google search for the phrase "sharing videos" or "embed youtube video" will find all the information you need, especially this page. After you have uploaded video to YouTube, or found a video you like on YouTube or Vimeo, it's as easy as clicking button marked "share" and copying a few lines of code from there to your HTML page. You even get to customize the embedded player.
By now, you should know that techniques for multimedia on the Web are changing rapidly, including some new twists coming in HTML5 video, which may need some transitional workarounds.
(I also use this page to test whether various browsers and devices are capable of playing video hosted with the techniques demonstrated here.)
Along with YouTube, which offers a whole "handbook" of video tutorials, two of the other most popular post-your-video sites are Vimeo and Blip.tv. Want more about the tools to make and upload your own video? See my October 2009 blog post about Video tools for multimedia student journalists.
Redesigning the News and your mind (TED)
My favorite source for video to watch (and embed) is TED, a conference offering brilliant short lectures, such as the two below. (It was hard to decide which to use, so I put more of TED on a separate page.)
Your brain on videogames
Upload and play your own video
... with Vimeo
This is an older Dreamweaver tutorial posted on the free Vimeo video-hosting service. You can search for embeddable videos by other people, or upload your own to Vimeo's server. YouTube, Archive.org and other sites provide similar services.
Dreamweaver Tutorial from Cartoon Smart via Vimeo.
Upload and share with YouTube
Free hosting services are dealing with changing standards -- offering video players that are compatible with new versions of Flash, or with HTML5's methods of embedding video without using Flash. Don't be surprised if some of your (or my) older demonstrations using Embed or Object codes break! I update these pages each semester, but you may catch one between revisions.
Similarly, the content of videos on shareable websites may go out of date, such as software tutorials that use older versions of programs.
Example: a Dreamweaver-at-Radford tutorial
YouTube provides free hosting for short videos. It allows you to upload video from smartphones and cameras in most of the common video formats, once you have created a free account.
After your video is online, you just click a triangle in the bottom corner to get the embed-a-player code used to put this video here, or a simpler link code to open the same clip at YouTube.
That video of mine is a somewhat dated "screencast" about using Dreamweaver CS-4 to download an RU Web site to your home computer and edit it from there. The newer Dreamweaver CS-5 has simplified the "define a site" process. With either version, you can use Dreamweaver to make a "mirror" of your site, edit pages, and upload the new versions back to the RU Web server ("ruacad.radford.edu") using File Transfer Protocol ("secure FTP") instead of using VPN to mount your RU server space on your home computer. Both approaches work.
My YouTube video is shared above using YouTube's 2009 technique with an
"object" tag. The version below uses the newer
"iframe", for which YouTube offers your choice of embeddable
codes giving you more control of the player sizes and other features. The
code isn't much different from an "img" image box.
(<iframe width="640" height="480" src="http://..."> )
You can resize the iframe by editing the height
and width codes (being sure to keep them in proportion). In the
example below, I put the iframe in a centered "div" as well as increasing
the dimensions of the frame itself to fill most of the
window. Because an iframe opens a window into your page and limits your
control of the contents of that window, I'm reading up on a new HTML5 attribute
called "sandbox," intended to block some features of an iframe.
See YouTube's own page on Sharing Videos
Here's a well-illustrated, but possibly not as up-to-date, tutorial on uploading to YouTube, thanks to webvideozone.com.
Animoto
Animoto will make a free "music video" out of any pictures you upload. (My old demo is offline, but there are plenty of samples and instructions on that page.)
Embedding text documents via Scribd
Movies aren't the only objects you can embed in Web pages -- here's a text-only tutorial using the Sribd document-sharing system. As a bonus, the document itself explains how to make a video montage with iMovie.
iMovie '08 Step-by-Step Tutorial
An old Quicktime video,
with a 90-degree twist
The videos you've seen above use various Flash media players. This one uses Quicktime, Apple's multimedia format, which has its own media player. (An inexpensive program called Quicktime Pro allows you to edit and reformat Quicktime movies.) This video was shot with a small Canon point-and-shoot camera turned sideways, because from my angle the fireworks were taller than they were wide.
An old Boston acquaintance, pioneer videoblogger Steve Garfield, tipped me off that Quicktime Pro had a setting to turn video sideways. He hadn't tried it, but it turned out to be pretty easy.
Meanwhile, notice that the version in the left column is narrower -- that is just a manipulation of the width and height items in the code. It may not work on all browsers, but I have my fingers crossed. Examine any code you embed in your pages; try to figure out how it works. Watch for properties like "autoplay" and "loop," as well as width and height settings.
Unfortunately, Microsoft has changed the way Internet Explorer handles Quicktime players, so I may have to update my code. At least that's what Dreamweaver says when I load this page.
Whatever the fix is, I hope it will still allow the resizing trick I used in the left rail. But I'm optimistic: Crossing my fingers already worked when I tried to apply the "float left" class to that version of the video!
Are Old Movies New Again Online?
Maybe you just need an Intermission Break at this point... thanks to the out-of-copyright video collections at Archive.org. But beyond the hotdogs and popcorn, you can find hundreds of full-length movies, educational films, cartoons and TV shows to embed on pages. (Not to mention hundreds of radio programs and other audio files.)
When intermission's over, don't forget those other TED videos! That's also an example of how to create a new page based on an old one: When this page was getting too long, I saved a copy, then deleted half of each one, and put in links between the two.
Not Video
Another Web-sharing feature using embedded "player" style code is the RSS-feed enclosure demonstrated on the left column of my home page, offered by RSS-Include. It works very nicely with feeds automatically generated by WordPress or Blogger blogs, creating news feeds of headlines and summaries. For more on RSS, see this old, but still accurate, article.
Back to "Very Visual" page (the one with flowers)