HTML5 and CSS3: Building Responsive Websites

Making your video respond to your screen width

The streaming of video can also be responsive. You can easily embed an HTML5 video in your page and make it responsive. The video tag easily supports using a percent width. However, it requires that you have the video source on your website's host. If you have this available, this is easy.

<style>
video {
     max-width: 100%;
     height: auto;
}
</style>

<video width="320" height="240" controls="controls">
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
     Your browser does not support the video tag.
</video>

However, using a video-hosting site, such as YouTube or Vimeo, has many advantages over hosting it yourself. First, there is the bandwidth issue, you may have bandwidth ...