How to add an inline svg behind an iframe object?

I currently facing an issue where I have a Iframe object, which I hide and show, and when hidden should an SVG be shown.

how to make sure that this SVG is behind the iframe.

I am currently have added it using inline SVG as I use use to grab it?

So my situation currently is

<div class="player">
<div style="width: 100px;height: 100px;display: block;margin: auto;">
<svg>
<use xlink:href=".."></use>
</svg>
</div>
<div style="height: 0px; padding-bottom: 56.25%; position: relative;">
<iframe width="400" height="245" src="//https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;" id="iframe1"></iframe>
</div>
</div>

The outer div player adds an background

The child div of player adds the style for the SVG

svg and use insert the SVG file, currenly above the iframe

and the iframe below the SVG image..

Solution

The normal approach to overlaying two elements is to have a container element with position: relative and set position: absolute on the child elements.

Elements with absolute positioning can be positioned relative to the nearest ancestor that is positioned. That is why we are doing position: relative on the parent.

Eg.

.player {
  position: relative;
}

.player > div {
  position: absolute;
  top: 0;
}

<div class="player">
  <div style="width: 100px;height: 100px;">
    <svg>
      <use xlink:href=".."></use>
    </svg>
  </div>
  <div style="height: 0px; padding-bottom: 56.25%;">
    <iframe width="400" height="245" src="//https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;" id="iframe1"></iframe>
  </div>
</div>