title: how to share the same div in two places
body: <p>I want to share the same player not sure how to go about this without javascript and without duplicated player.</p>
  <p>Basically, I have the following for mobile:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;d-block d-lg-none d-xl-none d-xxl-none&quot;&gt;
      &lt;div id=&quot;player&quot;&gt; &lt;!-- video player here --&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And for desktops:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;d-none d-lg-block d-xl-block d-xxl-block&quot;&gt;
     &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
           &lt;div id=&quot;player&quot;&gt; &lt;!-- same video player here --&gt; &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Is there a way to achieve this?</p>
  <p><strong>Update</strong>: When a user have a desktop browser open that doesn't take all the screen it will show (probably) the first block of code when he adjust so it will take the full screen it will show the second block of code how can I keep the player in his current state from the first block of code to the second one or somehow move it keeping its state?</p>