I recently had to embed some YouTube Videos on their Website.
The YouTube Embed Code is easy to copy and paste it into the Website but I soon noticed that the Video was NOT responsive or reflective on my Mobile Phone as it had FIXED Height and Width.
You will need to wrap the responsive YouTube video embed code with a <div>and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. You will also want your embeded video to be centered on your mobile devices. This will force the embed elements to expand full-width automatically. Awesome! Exactly what we need.

First you will need to add the following to your custom style sheet.
CSS

/* Youtube Reflexive */
.vid-container {
position: relative;
padding-bottom: 50%;
padding-top: 35px; height: 0; overflow: hidden;
}

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

Then just add the div around your usual Youtube Embed Code

<div class="vid-container">
         <iframe width="xxx" height="xxx" src="https://www.youtube.com/embed/(EMBED CODE)" frameborder="0"></iframe>
</div>

If the responsive YouTube video embed worked, your videos should be responsive and ready to view on Tablets and Mobile devices.

Need Help? Contact Me