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: