If you ever have clicked the embed button on Youtube you may have noticed that most of the time your video will not respond if your template does for mobile devices. You need to make a couple of tweaks.

Luckily for you, there is a really easy website that will do all the heavy lifting. Just go to embedresponsively.com and paste the code that it generates into your site.

If you are skilled at CSS, you can take a different approach and add some code to your style sheet. Here is what that would look like:

CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

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

The HTML code would look a like this:

<div class="video-container">
<iframe src="#" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>

Here is an example:

<div class="video-container">
<iframe src="https://www.youtube.com/embed/AdKUJxjn-R8?start=69" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>