Youtube iframe code has fixed width and height, and this make responsive layout a bit problem. To solve this problem use below HTML code and CSS
<div class="videoWrapper"> <iframe width="560" height="315" src="[YouTube Video URL]?rel=0" frameborder="0" allowfullscreen></iframe> </div>
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Add ?rel=0 after Youtube url
<iframe width=”640″ height=”360″ src=”[YouTube Video URL]?rel=0&autoplay=1″ frameborder=”0″ allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GCStS6_wQ2U?autoplay=1&mute=1" allowfullscreen></iframe>
Another option is to use this Plugin.