Inserting Online Video Clips into Web Pages
by Alan Zisman (c) 2011, 2021 ~ Spanish translation
Last updated: 2023-01-21
Online video is a powerful enhancement to web pages you create. However, you probably don't want to have to store large video files online and you probably don't want to serve it to viewers. Luckily, free video websites such as the popular YouTube and Vimeo will do all the heavy lifting for you... all you have to do is add a snippet of code to your webpage pointing to your desired video clip.
And to make it even easier, sites like YouTube and Vimeo will even give you the snippets of code, so you don't need to actually know anything about javascript programming to make it all work.
I'm going to illustrate the steps to take, using the free multi-platform KompoZer web editing software. KompoZer is the latest of a family of free web editors that include: Netscape Gold and Composer, nVu, SeaMonkey Composer and more. KompoZer is available in near-identical versions for Windows, Mac OS X, Linux, etc from: https://sourceforge.net/projects/kompozer/files/current/0.8b3/ (Note - if you are using Ubuntu or a number of other Linux distributions, you should probably use the distribution's internal software add/remove tool rather than the download link).
2021-03-17 note: Kompozer is no longer being developed or supported, but it continues to run on Windows, Linux - and on Mac OS versions up to OS 10.14 Mojave. Later Mac OS version do not support 32-bit applications. There is a 64-bit app from the same family, BlueGriffon which will run under Mac OS 10.15 Catalina - but not under Mac OS 11 Big Sur. Moreover, BlueGriffon is not free, and at Euro75 is relatively expensive. SeaMonkey can run under recent Mac OS versions, though I find it missing some of Kompozer's advanced features.
If you are using some other web editing tool, most of what I describe will still work for you, but the exact steps may vary, and the dialogue boxes will appear somewhat different. For that matter, I'm using a Mac version of KompoZer, and dialogue boxes (etc) will look somewhat different to folks using a Windows or Linux version of the program, to say nothing of users of other programs from the Kompozer/Composer family.
Take a look at squeezeboxcircle.org
Click on the Musicians & Bands link... you should see something like this:
As you
scroll down the page, notice that arranged along the left is a set of
videos of Vancouver accordion players, each in its own window, with a
different coloured frame, and a YouTube logo in the lower-right corner.
You can click play to play a video - you can even play multiple clips
at the same time, though you probably don't want to. Clicking the icon
below the YouTube logo will play the clip full-screen.
All very nice, and all without any of the video clips needing to reside on the Squeezebox Circle's web server - YouTube does all the heavy lifting.
Here's how I added these videos to that webpage.
Step One: Find your video on YouTube
(Or Vimeo or some other video sharing site, but I'm using YouTube for this tutorial, partly because it's the most widely used video sharing service).
I've searched YouTube for the Vancouver zydeco band Mojo Zydeco, and picked the clip where the band is playing I Want My Baby Back at the Ladner Public Market. Below the actual video window, you'll see a series of buttons - Like, Add To, Share, Embed, etc:
Click the Embed button. You'll get something like this:
Some code is highlighted, along with some options. Before rushing into copying the code to your computer's clipboard, let's take a moment to look at some of the options. Nice, but really just eye-candy: you can set the colour of the bar at the bottom of the window (set at purple in the above example). Note that as you change options, you'll see how it will look in the thumbnail beside the code. More important - pick a size for the video window, appropriate for how big you want it to appear on your webpage. There are four pre-set sizes in this example (when you do this, they may be different, depending on whether the video is standard definition or wide-screen). You can also pick other, Custom, sizes - but be careful to set numbers in the correct proportions, or else your video will be stretched out of shape.
The Play in HD option might be tempting - everyone wants HD video, right? But if you choose it, you'll jump to the 1280x745 size - too large for most web pages. But it's up to you!
As you pick amongst the options, the code will be modified to whatever you've picked. When you're ready, make sure the code is highlighted - perhaps click somewhere in the code, and press Edit/Select All (or press Command+A on a Mac or Control+A on a Windows or Linux computer), then copy to clipboard (Edit/Copy, or Command+C or Control +C depending on your computer).
Open your webpage in your webpage editing software
I'm going to start KompoZer, then open my saved copy of the Squeezebox Circle Musicians page. KompoZer, like many other web editors, gives me a graphical view of the page, more or less the way it appears in a web browser. (You could, of course, start a new page instead of opening an existing page).
Notice that it doesn't show the video clips - instead, there's a box where the clip ought to go, with the label 'Object'.
Try as you might, you won't find a command in KompoZer's menus to let you insert the code that you copied into the clipboard. And if you pick a spot on the page, and Paste (Edit/Paste or Command+V/Control+V), you'll see something like the following (which isn't what you want, trust me!):
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/Yg7NKi5Aohw?fs=1&hl=en_US&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Yg7NKi5Aohw?fs=1&hl=en_US&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
Instead, you need to paste the copied embedding code in the webpage's Source code. Different web editors let you access the source code in different ways, but will generally refer to it either as Source View or Code View. In KompoZer, you can either click on the menu, and then pick ViewHTML Source or click the Source button at the bottom of the KompoZer window:
But don't do that yet!
First, you need to pick a spot on your page where you want the video window to appear... On my page, I'd like it to appear underneath the existing column of video clips. Click at that spot and type a word or two that don't appear elsewhere on the page. (And remember what you typed!) I tend to use words like 'Embed here' but the actual words don't matter - they're just a placeholder for where to paste the embed code.
Go ahead, type your couple of words.
Now go to Source View...
Looks different, doesn't it! This is what a web page really is - a page of plain text that is either content or a description of how the content should be displayed, along with links to other pages, links to images, etc.
What we want to do is find those couple of words you just typed in, in my case the words 'Embed here'. Luckily, the computer can do this work for you, using the program's search function. In KompoZer, I click the Edit menu, pick Find and Replace and type my words into the dialogue box, leaving the Replace field blank:
Click the Find Next button, and we jump to where those words appear in the code - with the words highlighted:
With those words highlighted, if I paste (Edit/Paste or Command+V/Control+V), those words will be replaced with the embed code I got from the YouTube page:
Don't worry if it scrolls way over to the right on the page... HTML code doesn't pay any attention to that.
(Yes, you can paste the embed code into the Replace with: field in the dialogue box, and find and replace in a single step if you prefer...)
Go back to the standard view - in KompoZer, called Design View - I use the button on the bottom of the window labelled Design - you'll be back to the view that sort of shows you how your page will look in a web browser.
As before, it won't show the actual video, just a rectangle labelled 'Object'. To see how it will look in your browser, you'll need to save the edited page - then, in KompoZer, you can click on the Browse toolbar item to open your page in your default web browser.
(Of course, your page is on your hard drive - not on the Internet... but that's a different topic!)
by Alan Zisman (c) 2011, 2021 ~ Spanish translation
Last updated: 2023-01-21
Online video is a powerful enhancement to web pages you create. However, you probably don't want to have to store large video files online and you probably don't want to serve it to viewers. Luckily, free video websites such as the popular YouTube and Vimeo will do all the heavy lifting for you... all you have to do is add a snippet of code to your webpage pointing to your desired video clip.
And to make it even easier, sites like YouTube and Vimeo will even give you the snippets of code, so you don't need to actually know anything about javascript programming to make it all work.
I'm going to illustrate the steps to take, using the free multi-platform KompoZer web editing software. KompoZer is the latest of a family of free web editors that include: Netscape Gold and Composer, nVu, SeaMonkey Composer and more. KompoZer is available in near-identical versions for Windows, Mac OS X, Linux, etc from: https://sourceforge.net/projects/kompozer/files/current/0.8b3/ (Note - if you are using Ubuntu or a number of other Linux distributions, you should probably use the distribution's internal software add/remove tool rather than the download link).
2021-03-17 note: Kompozer is no longer being developed or supported, but it continues to run on Windows, Linux - and on Mac OS versions up to OS 10.14 Mojave. Later Mac OS version do not support 32-bit applications. There is a 64-bit app from the same family, BlueGriffon which will run under Mac OS 10.15 Catalina - but not under Mac OS 11 Big Sur. Moreover, BlueGriffon is not free, and at Euro75 is relatively expensive. SeaMonkey can run under recent Mac OS versions, though I find it missing some of Kompozer's advanced features.
If you are using some other web editing tool, most of what I describe will still work for you, but the exact steps may vary, and the dialogue boxes will appear somewhat different. For that matter, I'm using a Mac version of KompoZer, and dialogue boxes (etc) will look somewhat different to folks using a Windows or Linux version of the program, to say nothing of users of other programs from the Kompozer/Composer family.
Take a look at squeezeboxcircle.org
Click on the Musicians & Bands link... you should see something like this:
As you
scroll down the page, notice that arranged along the left is a set of
videos of Vancouver accordion players, each in its own window, with a
different coloured frame, and a YouTube logo in the lower-right corner.
You can click play to play a video - you can even play multiple clips
at the same time, though you probably don't want to. Clicking the icon
below the YouTube logo will play the clip full-screen.All very nice, and all without any of the video clips needing to reside on the Squeezebox Circle's web server - YouTube does all the heavy lifting.
Here's how I added these videos to that webpage.
Step One: Find your video on YouTube
(Or Vimeo or some other video sharing site, but I'm using YouTube for this tutorial, partly because it's the most widely used video sharing service).
I've searched YouTube for the Vancouver zydeco band Mojo Zydeco, and picked the clip where the band is playing I Want My Baby Back at the Ladner Public Market. Below the actual video window, you'll see a series of buttons - Like, Add To, Share, Embed, etc:
Click the Embed button. You'll get something like this:
Some code is highlighted, along with some options. Before rushing into copying the code to your computer's clipboard, let's take a moment to look at some of the options. Nice, but really just eye-candy: you can set the colour of the bar at the bottom of the window (set at purple in the above example). Note that as you change options, you'll see how it will look in the thumbnail beside the code. More important - pick a size for the video window, appropriate for how big you want it to appear on your webpage. There are four pre-set sizes in this example (when you do this, they may be different, depending on whether the video is standard definition or wide-screen). You can also pick other, Custom, sizes - but be careful to set numbers in the correct proportions, or else your video will be stretched out of shape.
The Play in HD option might be tempting - everyone wants HD video, right? But if you choose it, you'll jump to the 1280x745 size - too large for most web pages. But it's up to you!
As you pick amongst the options, the code will be modified to whatever you've picked. When you're ready, make sure the code is highlighted - perhaps click somewhere in the code, and press Edit/Select All (or press Command+A on a Mac or Control+A on a Windows or Linux computer), then copy to clipboard (Edit/Copy, or Command+C or Control +C depending on your computer).
Open your webpage in your webpage editing software
I'm going to start KompoZer, then open my saved copy of the Squeezebox Circle Musicians page. KompoZer, like many other web editors, gives me a graphical view of the page, more or less the way it appears in a web browser. (You could, of course, start a new page instead of opening an existing page).
Notice that it doesn't show the video clips - instead, there's a box where the clip ought to go, with the label 'Object'.
Try as you might, you won't find a command in KompoZer's menus to let you insert the code that you copied into the clipboard. And if you pick a spot on the page, and Paste (Edit/Paste or Command+V/Control+V), you'll see something like the following (which isn't what you want, trust me!):
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/Yg7NKi5Aohw?fs=1&hl=en_US&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Yg7NKi5Aohw?fs=1&hl=en_US&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
Instead, you need to paste the copied embedding code in the webpage's Source code. Different web editors let you access the source code in different ways, but will generally refer to it either as Source View or Code View. In KompoZer, you can either click on the menu, and then pick ViewHTML Source or click the Source button at the bottom of the KompoZer window:
But don't do that yet!
First, you need to pick a spot on your page where you want the video window to appear... On my page, I'd like it to appear underneath the existing column of video clips. Click at that spot and type a word or two that don't appear elsewhere on the page. (And remember what you typed!) I tend to use words like 'Embed here' but the actual words don't matter - they're just a placeholder for where to paste the embed code.
Go ahead, type your couple of words.
Now go to Source View...
Looks different, doesn't it! This is what a web page really is - a page of plain text that is either content or a description of how the content should be displayed, along with links to other pages, links to images, etc.
What we want to do is find those couple of words you just typed in, in my case the words 'Embed here'. Luckily, the computer can do this work for you, using the program's search function. In KompoZer, I click the Edit menu, pick Find and Replace and type my words into the dialogue box, leaving the Replace field blank:
Click the Find Next button, and we jump to where those words appear in the code - with the words highlighted:
With those words highlighted, if I paste (Edit/Paste or Command+V/Control+V), those words will be replaced with the embed code I got from the YouTube page:
Don't worry if it scrolls way over to the right on the page... HTML code doesn't pay any attention to that.
(Yes, you can paste the embed code into the Replace with: field in the dialogue box, and find and replace in a single step if you prefer...)
Go back to the standard view - in KompoZer, called Design View - I use the button on the bottom of the window labelled Design - you'll be back to the view that sort of shows you how your page will look in a web browser.
As before, it won't show the actual video, just a rectangle labelled 'Object'. To see how it will look in your browser, you'll need to save the edited page - then, in KompoZer, you can click on the Browse toolbar item to open your page in your default web browser.
(Of course, your page is on your hard drive - not on the Internet... but that's a different topic!)