New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a page containing video

From: XHTML and HTML Essential Training

Video: Creating a page containing video

In this lesson, we're going to create the Videos page and this is really the final page of our website. You'll notice that this has an embedded YouTube video in it and as I wave my mouse over these things, you get all the little Flash doodads that YouTube embeds. So we'll learn how to do that. It's very easy to do. It provides free hosting for your videos and all kinds of features that would be difficult to provide on your own. So it's a very popular way to embed videos in a webpage these days. So this is our Videos page and this is what it will look like when we're done.

Creating a page containing video

In this lesson, we're going to create the Videos page and this is really the final page of our website. You'll notice that this has an embedded YouTube video in it and as I wave my mouse over these things, you get all the little Flash doodads that YouTube embeds. So we'll learn how to do that. It's very easy to do. It provides free hosting for your videos and all kinds of features that would be difficult to provide on your own. So it's a very popular way to embed videos in a webpage these days. So this is our Videos page and this is what it will look like when we're done.

So, let's get started. Here in our text editor we have the template file and you'll notice this is in the Videos folder under the Exercise Files. So here's our template, here's our beginning.css and here's our text file. So we'll go ahead and start with our Save As, save as videos.html and we'll save our CSS as main.css.

The videos.txt we do not need to save as anything because we're not going to write to it. We're just going to be reading from it. First thing we do is change the title. That's going to say Groundswell TV. Then we're going to do our menu, so we're going take this image and move it down here. Then we're going to take the link and move it up there and change this to home and change this to home, change this to home.

This becomes 80 and this one down here becomes 84. This becomes videos and finally this becomes videos over here. There we're done. So we'll save that, go ahead and test it in the browser. So we need to load up the Videos page in the browser and there we are. We have our menu and everything works.

That's our Videos page. Now we want to change our ID banner. That's right here. Change home_banner to videos_banner and we'll save that and reload the browser. There we have it, Swells & Vision. Go ahead and put in the alt text, "swells and vision." Now we'll go ahead and do the content. So we have our videos text file. This is really going to be easy here just a copy and paste and copy and paste.

That's really easy. Go ahead and do the indent. Let's take a look at this in the browser and there we have it. There is our Groundswell TV and there is our Video Clips. Now there's something missing. Oh, yeah, there is a video here. Ha-ha. So this video is on YouTube and I've got the YouTube page loaded up here with the video on it. You can see this guy surfing here. So we want to copy and paste this. YouTube provides this nice little Embed link and they also provide a way to customize it.

So you see the little Gear icon there, I'm going to click on tha,t and we get some different options. I always like to include the Enable delayed cookies. I'm going to start with that. YouTube normally provides cookies to the browser for some of its features and what this does is it prevents it from giving cookies to the browser when the video is embedded on a page that's not on the YouTube.com domain. So what this does is it delays any cookies until somebody clicks on the link to get to YouTube.com.

So viewing the movie on your website will not give cookies and I like that. So I uncheck the Include related videos, which is normally checked. So that way at the end of the movie, you don't get the related videos thing. I also don't click on Show Border. Now notice the object width is 853, so we want it to be the smallest possible size. You see that changes in there when we click on this. Now we can just copy and come over here to our text editor and paste it in here.

It will go right here. There it is. Oh my God! Look how long that is. It's 464 columns wide and that's a bit longer than what we'd like. Now you could just leave it like this and that would be fine and it would show up. Let me go and show you what that looks like on our page. I'm just going to close the YouTube page there now and reload this. Before I chose just the movie, it's going to show us this security warning. If you're testing this in Internet Explorer, you'll get a similar message, but it'll look a bit different. The security message will be at the top of the browser window. You just need to click on that security message and select Allow Blocked Content.

I'm going to detour now and show you what to do with this. Now what this means is that you're watching content in Flash but the content is off on a web server someplace and the page you're looking at is on your local computer. So if you're following along, you'll get this warning or something like it. That's because the HTML that you're looking at is on your local computer, but the Flash content is coming from the YouTube servers out there in the Internet someplace. Now if the page was loaded on a web server someplace on the Internet, you would not get this warning.

You'll only get this when the page is loaded on your local network on your local computer. So you could just click on OK and you also get this warning, because I took a long time and that's okay. Do you want to abort the script? No. So now we get the video, okay? But if I go and reload the page again, you get the warning again. So I'm going to click on Settings. I'm going to show you what to do with this. This loads a webpage over on the Macromedia website, which is at Adobe, and it allows me to set an exception.

So I'm going to edit locations, add location. This is the file on my desktop. I'm going to go ahead and copy. I'm pressing Ctrl+C on the PC or press Command+C on a Mac and Ctrl+V here, Command+V on a Mac and press Confirm. Now I have this exception. I have two of them in here. One is for the other location where I have this loaded on my computer. That's okay. You'll only have one and then I can close this and now whenever I hit Reload here, I'll just get the video. Now, back to what we were saying.

Notice how big this is on the page. So I want to edit that down and I also want to make that XHTML a little bit prettier, because that matters to me. That may not matter to you at all. So I'm going to edit this a little bit. Go ahead and break there and I'm going to go ahead and break here. You notice that this param is a closed param, so actually I'm going to change it to one of these because that's allowable in XHTML.

I'm going to do the same thing here. Now, I'm doing this because it matters to me and for most people it may not matter. It also makes a little bit easier to work with and I'm going to be working with it a little bit, because I'm not just sort to leave anything alone if I can do something with it. So this just takes a moment. We have our width and height here, which is where I'm going with all this. Again, with the embed you can collect that.

So now I have my content like this and I'm going to go ahead and just because I'm like that I'm going to intend a little bit there. All right. You notice that this has not changed how it works at all. All right? These are all things that-- all I've done is formatted it. So when I go and look at the video in our page again, it's still there and it still looks just fine. What I'm going to do is I'm going to change the size, because it's a little big, so I'm going to make this 420x260. I figured out these dimensions earlier, and these keep the same aspect ratio.

So I'll save that and I'll go ahead and look at it in the browser. Now that's a much more reasonable size and now I can do a little bit of formatting. I want to indent it a little bit. So again we'll go back to the browser. I'm going to put in a div and a closed div down here. I'll indent this and I'm going to give it an ID, youtubeVideo.

I'll save that and go over to the CSS, all way down here to the end. I'm just going to create a section for miscellaneous. So I know the C is silent in miscellaneous, but somehow I've always said it as if I were Popeye. "mis-ca-llaneous." So that will be 20 pixels at the top and at the bottom, 0 on the right and 30 pixels on the left. Go ahead and save this.

We've saved that already. Bring it up in the browser and there we have it. So this looks exactly like it does in our reference site. All right! That page is now done and working just fine. I just want to add one thing here. The site that we've been working with was designed by James Williamson. So I appreciate that. It allowed us to have some interesting content to work with as we showed you how to build a website using tables for positioning and using all the techniques that we learned in this course on XHTML and HTML.

Show transcript

This video is part of

Image for XHTML and HTML Essential Training
XHTML and HTML Essential Training

59 video lessons · 80112 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 5m 10s
    1. Welcome
      1m 16s
    2. Using the exercise files
      1m 23s
    3. Choosing a text editor
      2m 31s
  2. 15m 46s
    1. Introducing HTML and XHTML
      2m 53s
    2. Understanding versions of HTML and XHTML
      2m 25s
    3. Exploring a simple XHTML page
      4m 47s
    4. Understanding the structure of an XHTML document
      2m 58s
    5. Understanding document containers
      54s
    6. Creating and using templates
      1m 49s
  3. 42m 4s
    1. Understanding how empty space is formatted in XHTML
      2m 42s
    2. Using paragraph tags
      2m 42s
    3. Aligning paragraphs
      2m 49s
    4. Understanding block-level and inline tags
      1m 24s
    5. Controlling line breaks and spaces
      5m 43s
    6. Formatting text with phrase element tags
      3m 28s
    7. Formatting text with font markup elements
      3m 24s
    8. Adding document structure with headings
      3m 25s
    9. Formatting quotations and quote marks
      2m 19s
    10. Preserving pre-formatted text
      1m 30s
    11. Selecting a typeface
      4m 33s
    12. Selecting a type size
      2m 11s
    13. Using ordered and unordered lists
      5m 54s
  4. 7m 48s
    1. Using inline images
      3m 17s
    2. Flowing text around an image
      2m 4s
    3. Breaking lines around an image
      2m 27s
  5. 22m 34s
    1. Working with hyperlinks
      7m 46s
    2. Using relative URLs
      3m 5s
    3. Specifying a base URL
      2m 4s
    4. Linking within a page using fragments
      4m 28s
    5. Creating image links
      5m 11s
  6. 22m 56s
    1. Introducing tables
      4m 37s
    2. Formatting tables with CSS
      8m 50s
    3. Aligning images with tables
      5m 7s
    4. Reviewing an alternative solution using CSS
      4m 22s
  7. 14m 31s
    1. Introducing frames
      7m 56s
    2. Hiding frame borders
      3m 15s
    3. Creating inline frames using iFrame
      3m 20s
  8. 20m 50s
    1. Introducing forms: part 1
      10m 37s
    2. Introducing forms: part 2
      7m 45s
    3. Using CGI with forms
      2m 28s
  9. 25m 42s
    1. Introducing CSS
      3m 11s
    2. Understanding levels of inheritance
      6m 10s
    3. Learning CSS syntax
      11m 23s
    4. Using units of measure in CSS
      4m 58s
  10. 1h 45m
    1. Comparing table layout and CSS layout
      1m 25s
    2. Exploring the finished web site
      2m 37s
    3. Building a document header
      8m 18s
    4. Placing a banner and a contact button
      8m 13s
    5. Laying out a main menu
      6m 55s
    6. Creating a layout template: main body area
      13m 31s
    7. Creating a layout template: sidebar area
      5m 17s
    8. Creating a layout template: footer content
      4m 46s
    9. Building a main home page: main body content
      11m 24s
    10. Building a main home page: sidebar content
      8m 52s
    11. Creating a page with a menu, graphics, and formatted links
      13m 26s
    12. Creating a page containing an ordered list
      6m 44s
    13. Creating a page containing video
      10m 45s
    14. Touring the finished site
      3m 45s
  11. 53s
    1. Goodbye
      53s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.