A Smarter Way To Learn HTML & CSS(2015)
79
Embedding YouTube videos
There are several ways you can add video to your website. The easiest is to embed a YouTube or Vimeo video. Plus, when you let YouTube or Vimeo host the video free instead of storing it on your webhost’s server, you avoid possible extra charges your webhost might hit you with for using extra bandwidth (video is a bandwidth hog).
For complete control, you can host videos yourself. The vast majority of site owners don’t do it, though, because it’s a headache—and not just a regular headache but a migraine. Because makers of devices, operating systems, and browsers can’t agree on one video standard, you have to create a variety of different video files if you want your video to be seen by everybody. You’re a shoe manufacturer who has to make sixteen different sizes.
Since it’s so much easier to let YouTube or Vimeo handle the compatibility issues, that’s what I’m going to focus on.
In the last chapter you learned how to place an exterior page inside an HTML page by coding an iframe. That’s the method you use to embed a YouTube or Vimeo video.
Let’s start with YouTube.
You can find out how to post a YouTube video at YouTube or elsewhere online. I’m going to assume you’ve produced your video and posted it to YouTube. Here’s how to put it on your webpage.
1. Find your video on YouTube. Locate “Share” under the video window and click it.
2. Click “Embed.”
3. Click “SHOW MORE.”
4. Scroll down to see some choices you can make.
5. Click the Video size dropdown, and you can choose from four standard video sizes. You can also choose “Custom.”
If you choose a custom size, be sure to keep the ratio of width to height at 16 to Otherwise, the picture will distort. To remember the ratio, picture a young person in the U.S. getting her driver’s license (16 years old), and driving the number 9 around.
You can also use a ratio of 4 to 3. If you do, you’ll need to change the Aspect Ratio on your video’s Player controls panel. See the next chapter for more on this.
6. Next, look at the other choices you have, below the Video size dropdown.
You’ll want to uncheck “Show suggested videos when the video finishes,” unless you want the user to choose from a gallery of more YouTube videos when your video finishes.
“Enable privacy-enhanced mode” means that YouTube won’t store information about visitors to your site unless they play the video. In most cases, you won’t care about this.
7. When you’ve finished making your selections, copy and paste the YouTube-generated iframe code into your HTML document.
8. If you’d like to add a frame border, change the “0” to a “1”.
="640" height="360" src="//www.youtube.com/embed/_tky2rAxBIU?rel=0" frameborder="1" allowfullscreen></iframe>
9. If you don’t want the user to be able to enlarge the frame to fullscreen size, delete allowfullscreen.
<iframe width="640" height="360" src="//www.youtube.com/embed/_tky2rAxBIU?rel=0" frameborder="1"
coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/79.html