Google Maps with Bootstrap not responsive
This uses Bootstrap's Responsive Embed feature with fixed aspect ratio of 16/9:
<div class="embed-responsive embed-responsive-16by9">
<div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>
REVISED: The Official Post is outdated, so I've updated my answer and improved the code.
The following method does not require bootstrap or any other framework. It can be used independently to make any content responsive. To the parent element is applied a padding by calculating the aspect ratio. Then the child element is placed on top using absolute position.
The HTML:
<div class="iframe-container">
<!-- embed code here -->
</div>
The CSS:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
The following 'fiddle' has examples on how to make:
- Responsive Google Map
- Responsive OpenStreetMap
- Responsive Vimeo Video
- Responsive Youtube Video