RWD-Responsive Google maps & Youtube

CSS


/* Flexible iFrame */

.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


HTML

★Google maps
<div class="Flexible-container">
<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near" width="425"></iframe>
</div>



★Youtube
<div class="Flexible-container">
<iframe src="http://www.youtube.com/embed/?autoplay=1&list=PLGaMea0lA6fvzt24OEDTXSt9QLWzTTfmQ" frameborder="0" allowfullscreen></iframe>
</div>



★source:
http://www.ucamc.com/e-learning/css/126-embedded-youtube-vimeo-content-responsive.html
https://www.niklausgerber.com/blog/responsive-google-or-bing-maps