Embedding video from either YouTube or Vimeo directly onto a website or in a WordPress post is a straight forward process.

All you need to do is simply copy and past the embed code provided by such services into your post, or HTML page. Below are two examples of basic embed codes.

  • Example YouTube Embed Code:
    <frame width="853" height="480" src="//www.youtube.com/embed/LvteUhmhpKc" frameborder="0" allowfullscreen></iframe>
  • Example Vimeo Embed Code:
    <iframe src="//player.vimeo.com/video/22439234?title=0&byline=0" width="853" height="479" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Customizing how the video appears on your website, simply involves modifying the player parameters. Changing the display options from the video player is easy to do with the parameters made available from both service providers.

Vimeo and YouTube both offer an extensive array of options for customizing the look of the video player when displayed on your website.

YouTube

On YouTube.com navigate to the video you want to embed and click the Share link, just below the video stats. Click the Embed link, modify the parameters, then copy and paste the code into your post content. You can also add the changes directly into the embed code. Listed below are some useful parameters.

  • controls – Values: 0, 1, or 2. Default is 1. This parameter indicates whether the video player controls will display. For IFrame embeds that load a Flash player, it also defines when the controls display in the player as well as when the player will load:
  • controls=0 – Player controls do not display in the player. For IFrame embeds, the Flash player loads immediately.
  • controls=1 – Player controls display in the player. For IFrame embeds, the controls display immediately and the Flash player also loads immediately.
  • controls=2 – Player controls display in the player. For IFrame embeds, the controls display and the Flash player loads after the user initiates the video playback.
  • rel – Values: 0 or 1. Default is 1. This parameter indicates whether the player should show related videos when playback of the initial video ends.
  • showinfo – Values: 0 or 1. The parameter’s default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.
  • modestbranding – This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user’s mouse pointer hovers over the player.
  • Modified YouTube Embed Code:
    <frame src="//www.youtube.com/embed/LvteUhmhpKc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

YouTube HTML5

As of January, 2015, YouTube will now default to HTML5 over Adobe Flash to add more flexibility for developers, bloggers and consumers. This move should help save bandwidth, load time and file size.

“Given the progress we’ve made with HTML5 <video>, we’re now defaulting to the HTML5 player on the web. We’re also deprecating the “old style” of Flash <object> embeds and our Flash API. We encourage all embedders to use the <iframe> (iframe API), which can intelligently use whichever technology the client supports.”

While YouTube has offered users HTML5 functionality for several years now, many developers and designers will appreciate the default setting. You can learn more about YouTube’s HTML5 changes by reading this post.

Vimeo

On Vimeo.com, go to the video you wish to embed, and click the Share link. A popup screen will give you the information you need to embed and modify the parameters. Simply click the +Show options link and choose your options. Modify the parameters, then copy and paste the code into your post content. You can also add the changes directly into the embed code. Listed below are some useful parameters.

  • byline – Show the user’s byline on the video. Defaults to 1.
  • title – Show the title on the video. Defaults to 1.
  • portrait – Show the user’s portrait on the video. Defaults to 1.
  • badge – Enables or disables the badge on the video. Defaults to 1.
  • color – Specify the color of the video controls. Defaults to 00adef. Make sure that you don’t include the #.
  • Modified Vimeo Embed Code:
    <iframe src="//player.vimeo.com/video/108018156?title=0&byline=0&portrait=0&badge=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Both video services provide other parameters to work with, and Vimeo Pro allows even more custom display options. YouTube frequently makes changes to player parameters, so keep that in mind when using player options.

Responsive Video

Responsive design helps make your website mobile-friendly. Embedding your videos using a touch of CSS will help make sure they are easily viewable on desktop, and mobile devices. All you need to do is wrap the <iframe> inside a <div> with a responsive-video CSS class. First off, let’s start with the basic HTLM <div> and CSS.


<div class="responsive-video">
<iframe src="//www.youtube.com/embed/LvteUhmhpKc"></iframe>
</div>


.responsive-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

Now all we need to do is add an extra CSS class to handle YouTube, Vimeo, HTML5 <video>, and Widscreen options. Simply add the extra CSS class to your <div> and include the related CSS code in your style.css file.


<div class="responsive-video vimeo">
<iframe src="//www.youtube.com/embed/LvteUhmhpKc"></iframe>
</div>


.responsive-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.responsive-video.widescreen {
  padding-bottom: 56.34%;
}
 
.responsive-video.vimeo {
  padding-top: 0;
}

.responsive-video embed, 
.responsive-video iframe, 
.responsive-video object, 
.responsive-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

Responsive Plugin

If you’re familiar jQuery and installing scripts, you might want to use the FitVids plugin available here. FitVids is designed to make embedding responsive video easier by providing an “out of the box” solution for use with any player. You can learn more about FitVids and responsive video embedding, by reading this article by CSS Tricks maestro Chris Coyier.

More Resources