How To Easily Make YouTube Embed Players Responsive

It is very easy to make the default YouTube embed player function properly on a responsive website and can be achieved by completing the following. Please note if you wish you may place the contents of the <style></style> tags inside your website CSS. Simply replace src of the embed iframe below with that of your own YouTube Video.

<style>
.embed-responsive-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-responsive-player iframe, .embed-responsive-player object, .embed-responsive-player embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>

<div class="embed-responsive-player"><iframe src="https://www.youtube.com/embed/XXXXXXXX" frameborder="0" ></iframe></div>