Tutorial #4
Embed a YouTube Video Basic   2013-11-01

Introduction

Embedding a YouTube video in a page is a very common task for web developers and YouTube make it extremely easy for us.

The embedded video window will look like this:


Step by Step

There are two slightly different ways in which YouTube videos are displayed. Where you find the code for embedding the video varies between the two. I'll show you both ways here.

Method #1 - video has icons at the top of the video window

This seems to be the default if the video is already embedded in another page

1: Go to the page that has the video the you want to embed

2: Right Click on the 'Links' icon in the top right of the video window (It looks a bit like a molecule to me) and then select Copy embed code.

3: You won't see any result of that click, but it has copied the code needed to embed the video into your clipboard. You can now go to your web page and paste the code where you want the video to be displayed.

4: Save your page, reload and you should see the embedded video window.

Method #2 - no icons at the top of the window

This seems to be the default if the video is displayed directly on the YouTube site.

1: Go to YouTube and track down the video you want to embed.

2: Below the video you will see a series of links marked About, Share, etc. Click on Share.

3: A panel will appear below this with a number of ways to share the video. Click on the Embed link.

4: The panel now changes to show a block of HTML code that is already selected, along with some options to customize it. Don't change any options for now, just copy the HTML and paste it into your web page.

5: Save your page, reload and you should see the embedded video window.

Not all videos can be embedded. The owner of the content can choose to block this feature.


Understanding the Code

The code for this tutorial is pretty basic. The iframe simply provides a container for the content that comes directly from YouTube.

Copying the embed code from YouTube directly (method #2) offers you the chance to select the size and 3 other options, but you can also set these by adding key=value parameter pairs to the src URL.

If you want the embedded video to start somewhere else than the original start, you can add #t= followed by the start time in the format of number m number s. For example to start 1 min 15 secs in to the original video you would add #t=1m15s to the end of the URL.

This Help Page from Google has more information on customizing embedded videos.

Be aware that YouTube also has an older way of embedding videos which use an object tag. You want to use the newer format with the iframe tag.

To change the size of the embedded video window you can change the width and height attributes of the iframe. The window will grow or shrink to fit the size you request.

To ensure the videos don't look distorted, use a width : height ratio of 4 : 3.

Try changing those in your page and see what works best for you.


Code for this Tutorial


Share this tutorial


Related Tutorials

9 : Embed a Vimeo Video   (Basic)


Comment on this Tutorial


comments powered by Disqus