Further customizing YouTube videos - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

80
Further customizing
YouTube videos

When you’re embedding a video on your site, you may not want a YouTube video to look like a YouTube video. You may want it to display without the YouTube branding and controls.

When you banish the YouTube branding and controls, a YouTube logo will appear in the lower right corner before playback and when the user mouses over the video, but otherwise, you’ve got a video that looks proprietary.

You can choose from a number of options to make the video look and perform the way you want it to. But you have to go to Google, the owner of YouTube, to do it.

Begin by copying your video’s YouTube ID from the YouTube URL for your video. It’s the code that follows the equal sign.

Alternatively, you can copy the ID from the iframe code that YouTube originally generated for you.

<iframe width="640" height="360" src="//www.youtube.com/embed/_tky2rAxBIU?rel=0" frameborder="1" allowfullscreen></iframe>

Note that the ID ends at the last character before the question mark. Go to: https://developers.google.com/youtube/youtube_player_demo.

Paste your video’s ID into the video ID field.

Click “Update player with selected options.

Google replaces the demo videos with your video when you click “Update player with selected options.”

If your ID is correct, the four video thumbnails are replaced by your video. It plays. You can pause it while you choose custom options.

Next, click the Show player parameters button at the top of the panel.

Another panel with an array of customizing choices displays.

Click modestbranding to banish the YouTube logo.

When you’ve finished making selections, once again click "Update Player with Selected Options" at the top of the panel.

The iframe embed code changes to reflect your selections. Copy and paste it into your HTML document.

In your HTML file, change your embedded video so it has modest branding. Save the file. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-80-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/80.html