1533 South Street · Floor One · Philadelphia, PA 19146 · 215.546.6496

The Basics of Video Embedding

Sure, it's easy to embed a video on your webpage, but making it look good? That's often another matter.

Whether it's your own organization's video or just one which brings a useful message to your site's users, there are some tips which will make embedding a YouTube or Vimeo video using a wysiwyg on a Drupal node hassle-free and attractive.

YouTube

First, click the "Embed" link under the video player. This will provide you with the list of options you see pictured here:

Screenshot of YouTube embed menuThe code in the box at the upper left is what you copy and paste into your page's source code. This will contain the code for the default size and color options (640 x 385 pixels and light gray), but you can change these options below that. The code updates automatically with your changes.

You can also choose to uncheck the "Include related videos" box if you don't want an automatically generated list of videos to appear on the video player.

To customize the width and height of the player to fit a particular region of your page, enter the specific pixel width in the "Custom" field.

Vimeo

The embed link for Vimeo videos is very similar. There, the "Embed" link is directly on the player screen, but you also have customization options for color (using hexadecimal color codes!) and screen size.

And finally...

Just a reminder: whenever you need to paste HTML code into a page, make sure you do so in the source, not in the wysiwyg view. You can switch to the source view by clicking the "HTML" or "Source" button on the editor.

Enjoy this video!