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:

Leave a Reply

Your email address will not be published. Required fields are marked *