Fully Responsive YouTube Videos & Google Maps

Add a <div> element around the <iframe> for your YouTube video or Google Map: <div class=”iframe-container”> <iframe src=”https://www.youtube.com/embed/j4o2PDwKdcA” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe> </div> Add the following to your stylesheet: .iframe-container { height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; } .iframe-container iframe { left: 0; height: 100%; position: absolute; top: 0; width: 100%; } Results: