Snippet de como crear un mapa responsivo de Google tambien podria aplicar un video de Youtube o Vimeo

googleMapsResponsive.html

<style>
    .map-responsive{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
    }
    .map-responsive iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }
</style>

<div class="map-responsive">
    <iframe src="mapa" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

<!-- Para controlar el ancho se debe agregar este div dentro de un contenedor -->
<!-- Para controlar la altura se debe de emular con el padding bottom de la clase "map-responsive" -->
<!-- Una alternativa a esta solucion puede ser usar viewport units -->
<!-- Source: https://www.ostraining.com/blog/coding/responsive-google-maps/  -->