iWeb FAQ - YouTube
iWebFAQ.org
Can someone please tell me how to post a YouTube video to my iWeb blog? Can I post a YouTube video to any other iWeb page besides blog pages?
You can post YouTube videos on all pages, not only blogs
1. Let's say you want to add the following video to your iWeb webpage
http://www.youtube.com/watch?v=BuoTuL1we_c
2. Copy the "Embed" you find on the right of the video you chose. For the video I chose it is:
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/BuoTuL1we_c&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/BuoTuL1we_c&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
3. Go to iWeb and the page you want to post the video to (Any page you want)
4. Go to web widgets, select HTML snippet
5. Paste the code you copied from the YouTube site (the whole code you find under Embed)
into the black box appearing after clicking on HTML Snippet.
6. Click Apply
7. Done, you will see the video appearing in your iWeb
To interact with the widget in iWeb double click the widget.
And here’s how it will look on your page (Katie Melua - Spider ‘s web)
Thanks to a visitor of the website we found out a beautiful way to implement videos to your website using frames.
Here is an example (miniaturized to fit the page), the “how-to” follows...
-
Choose a video
-
-
Basically it works just the same as the frames work (Chapter 2 of the Frames FAQ)
You have to create two html snippets. Snippet 1 will be the menu, Snippet 2 where the video is displaying.
Snippet 1:
<div style="height: 150px; width: 120px">
<SPAN STYLE="font-family: Times New Roman; font-size: 12pt">
<style type="text/css">
a {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #0000FF;
text-decoration: none;
}
a:visit {
color: #FF00FF;
text-decoration: underline;
}
</style>
<a href="http://www.youtube.com/v/D1R-jKKp3NA&rel=1" target="Showframe" class="class1">Steve Jobs</a><br>
<a href="http://www.youtube.com/v/BuoTuL1we_c&rel=1" target="Showframe" class="class1">Katie Melua</a><br>
<a href="http://www.youtube.com/v/nxpEqln5EdQ&rel=1" target="Showframe" class="class1">"George Bush"</a><br>
<a href="http://www.youtube.com/v/9NaMGL0B50c&rel=1" target="Showframe" class="class1">Almost Famous</a>
Notice the http://www.youtube.com/v/BuoTuL1we_c&rel=1
Where can you get that from?
This is the code You Tube provides you to embed the video:
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/BuoTuL1we_c&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/BuoTuL1we_c&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
in there you see the links. Just copy and paste the link into Snippet 1
For informations about how to customize the links appearance in Snippet 1 have a look at “Customizing the links” in the Frames FAQ.
Snippet 2:
<iframe
name="Showframe"
style="width:345px; height:290px;"
src="url of the video first loading" class="class1">
</iframe>
Change the link in Snippet 2 to the link to the video you want to display when the page loads.
Note that the video is taking its size from the sizes of Snippet 2, so changing the width and/or height of Snippet 2 will change the size of the video appearing.
I took screenshots of some of the iDVD templates, so the drive-in is just an image I put behind the Snippets. Not so professional way but very easy and pretty cool, huh?! You can download the screenshots by clicking here.
iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.
It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting here. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what.
Thank you for visiting and supporting my website.
- Cédric -
