When we embed a video from Youtube in our site, we fall in trouble with its frame size. By default the frame size about width = 560 PX and height = 315 PX. Since this size is fixed our responsive website can not make responsive this frame. We can make possible it with wrapping another div tag around the iframe and then customize with CSS. But it is annoying to add this repeatedly. To avoid this we can get help from jQuery. 
Make Automatic Responsive Youtube Embed Video in Website (also Blogger)

So lets start to make responsive Youtube embed video in your website or blogger website.
No need to use shortcode. Just copy Youtube embed and paste in your post/page (HTML format). Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/wUjv0gtX4xA" frameborder="0" allowfullscreen></iframe>
To make responsive Youtube Video follow the instructions step-by-step:
  1. First check whether you have added jQuery in your website. If no, add the following script tag before </head> tag.
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'/>
  2. Add the following CSS in your main CSS file. For Blogger website add the following CSS just before ]]></b:skin>
    /*********Responsive Youtube Embed**********/
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  3. Now put the Youtube Embed Code within the following tag.
    <div class='embed-container'></div>
You have finished to make responsive Youtube embed video.

Have got this article helpful or not working? Put your comment below.