As mentioned, you can host your videos yourself or through a third party. Both can be responsive, but using the HTML5 video element makes it a lot easier. For my example, I am using a video of an animated series I worked on. If you don't have your own video, feel free to practice with these (for example, http://chelmyers.github.io/RPL/media/v/cbmd.mp4). In the following screenshot, you can see this video scaling along with the browser:

HTML

<video controls>
  <source src="http://chelmyers.github.io/RPL/media/v/cbmd.mp4 " type="video/mp4"/>
  <source src="http://chelmyers.github.io/RPL/media/v/cbmd.webm" type="video/webm"/>
  <source src="http://chelmyers.github.io/RPL/media/v/cbmd.ogv" type="video/ogv"/>
  Your browser does not support the HTML5 video tag.
</video>

We are just using the basic HTML5 video element here. I have one video in three different formats so it appears on every browser. I even have a message in case the browser does not support the video tag.

CSS

video {
  max-width: 100%;
  height: auto;
}

Yup, that's it. You can scale videos the same way you scale images. The max-width makes sure the video doesn't scale past its actual size and height:auto helps keep its aspect ratio. What were you hoping for, something more difficult?

I wish I could say that scaling iframes are just as easy as video elements, but sadly I cannot. The iframe takes a little bit more work. However, as you can see in the following image, it is still possible:

HTML

<div class="video-wrap">
  <iframe width="560" height="315"
    src="https://www.youtube.com/embed/l9uqeTHrD9U"
    frameborder="0" allowfullscreen></iframe>
</div>

To get iframes working, we must wrap them in a container. With CSS, we will then make the container the size we wish the iframe to be. We will then stretch the iframe to fit this container. So, when the container scales up or down, the iframe will too.

CSS

.video-wrap {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* % of element's width. Ex. 9/16 = 0.5624 */
  padding-top: 32px; /*height of controls*/
}

.video-wrap iframe {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

For the iframe's container, or .video-wrap, we are setting position to relative so that we can position the iframe relative to it. We are setting the height to 0 because padding-bottom will be giving us the height we need. Setting the padding-bottom to 56.25% will make .video-wrap height 56.25% of its width. So, if our video has a 16:9 resolution, to figure out what the padding-bottom value should be, we divide 9 by 16 (that's 0.5625) and multiple it by 100. The padding-top value is making space for the videos controls. The second part, for .video-wrap iframe, is stretching the iframe to fit this new container.

It takes a little bit more work, but it is still easy to set up. Whether you use the HTML5 video elements or keep your videos on YouTube, there's no reason why they shouldn't scale as well.