Youtube & Google Map Responsive using Bootstrap

September 7, 2018 7:46 pm by ATS Staff

Youtube:

<style>
.yt-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
.yt-container iframe, .yt-container object, .yt-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
} 
</style>

<iframe src="https://www.youtube.com/embed/7rk0279i7vM?rel=0&amp;modestbranding=0&amp;autohide=1&amp;showinfo=0&amp;controls=1" frameborder="0" allowfullscreen=""></iframe>

Google Map:

<style>
.map-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.map-iframe-container > * {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
</style>

<script>Map related JS code</script>

<div class="map-iframe-container">
   <div id="map"></div>
</div>