What’s the problem?

So you’ve a great new video you want to embed on your website? Maybe you’ve uploaded it to YouTube and have a code snippet to use on your site. You add the code and Bingo! it looks great. Just take a quick look at it on your tablet and mobile device and Whoah! that looks awful. You want the video window and image to scale depending on the size of the screen and not cropped as it appears at the moment.

What’s the solution?

If you make use of the Bootstrap framework and are working with 3.2 or newer, it’s easy. You can simply use predefined classes like this:

16:9 Responsive Aspect Ratio

<div class=”embed-responsive embed-responsive-16by9″>
  <iframe class=”embed-responsive-item” src=”https://www.youtube.com/embed/ntvvv7GUMmM?rel=0″></iframe>
</div>

4:3 Responsive Aspect Ratio

<div class=”embed-responsive embed-responsive-4by3″>
  <iframe class=”embed-responsive-item” src=”https://www.youtube.com/embed/ntvvv7GUMmM?rel=0″></iframe>
</div>

What about other frameworks?

If you’re not using Bootstrap, you have to create your own classes and CSS snippet. It’s not difficult though, so here’s an example.

<style>

.my-responsive-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.my-responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

</style>

<div class=”my-responsive-video”>
  <iframe src=”https://www.youtube.com/embed/ntvvv7GUMmM?rel=0″></iframe>
</div>

Summary

So that’s it. It’s not difficult but it makes a world of difference to how your videos are rendered on your website. Take a minute to follow these guidelines and your videos will be responsive and look great, whatever size of device they’re being viewed on.