Embedded google maps iframe in SVG element - css

Question

How can i add my google maps into an svg element?
I want to fill svg with map.
The map appears but stretched and out of the svg shape
To teste the code you have to insert an src link in iframe.
My code:
svg
{
stroke: red;
}
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<foreignObject id="map" width="560" height="349">
<iframe width="560" height="349" frameborder="0" style="border:0" src="LINK + API_KEY" allowfullscreen></iframe>
</foreignObject>
<path fill="url(#map)" d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z" />
</svg>
Thank's

Answer 1

Here's a solution based on Yoksel's "Masking video with SVG Clippath". The placeholder video is just to provide a working public iframe. To use this solution you'll have to redefine the <path> to have the right sizing (if you're lucky, you'll just be able to use percentages like Yoksel did).
(#yoksel are you the same Yoksel?)
.svg {
width: 560px;
height: 349px;
}
<svg class="svg">
<clippath id="my-clippath">
<path d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z"></path>
</clippath>
<g clip-path="url(#my-clippath)">
<foreignObject width="560" x="0" y="0" height="349">
<iframe width="560" height="349" src="https://www.youtube.com/embed/NpEaa2P7qZI" frameborder="0" allowfullscreen></iframe>
</foreignObject>
</g>
</svg>