title: Is there a way to retain JW Player responsive video selection while in a video tag?
body: <p>We are producing a number of videos and using the JW Player hosted content for streaming. The problem is we need to have the video in the background behind various htlm5 elements.</p>
  <p>We can target a specific JW Player asset using the &lt;video src=&quot;link to video&quot; ...&gt; but this ties us to one version and sized video for all viewports (desktop, tablet and mobile).</p>
  <p><strong>General JW Player use:</strong></p>
  <p>After uploading a high quality video to JW Player, it creates several optimized versions in various sizes. IF the script they provide for embedding their player is used, it is viewport aware and will serve the most efficient sizes video for the viewport making the request for video.</p>
  <p><a href="https://i.stack.imgur.com/Fk0vw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fk0vw.jpg" alt="Available Videos" /></a></p>
  <p>Our goal is to be able to appreciate a viewport aware case where a right-sized video is served from the JW Player, and in a html wrapper where we can overlay our other html elements..?</p>
  <p>Our code for reference purposes:</p>
  <pre><code>    &lt;div class=&quot;col-md-12&quot;&gt;
          &lt;div class=&quot;video-container-test d-flex mb-2&quot; style=&quot;flex-wrap: wrap;&quot;&gt;
          &lt;h2&gt;Embed code from JW Player:&lt;/h2&gt;
          &lt;div itemscope=&quot;&quot; itemtype=&quot;https://schema.org/VideoObject&quot;&gt;
              &lt;meta itemprop=&quot;uploadDate&quot; content=&quot;Mon Jun 06 2022 16:43:27 GMT-0700 (Pacific Daylight Time)&quot;&gt;
              &lt;meta itemprop=&quot;name&quot; content=&quot;Sundancehd&quot;&gt;&lt;meta itemprop=&quot;duration&quot; content=&quot;P0Y0M0DT0H0M58S&quot;&gt;
              &lt;meta itemprop=&quot;thumbnailUrl&quot; content=&quot;https://content.jwplatform.com/thumbs/tgc2jQaf-1123.jpg&quot;&gt;
              &lt;meta itemprop=&quot;contentUrl&quot; content=&quot;https://content.jwplatform.com/videos/tgc2jQaf-8T09123.mp4&quot;&gt;
              &lt;script src=&quot;https://cdn.jwplayer.com/players/tgc2jQaf-FmVsQIFZ.js&quot;&gt;&lt;/script&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;video-contents&quot;&gt;
              &lt;h1 class=&quot;video-contents&quot; style=&quot;text-shadow: rgba(0, 0, 0, 0.65) 0px 0px 8px;&quot;&gt;Sundance Project&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class=&quot;video-contents mt-auto&quot; style=&quot;width:100%;&quot;&gt;
              &lt;div class=&quot; info-block&quot; style=&quot;width:100%&quot;&gt;
                  &lt;h2&gt;Location:&lt;/h2&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-md-4&quot;&gt;&lt;img class=&quot;projects-logo&quot; src=&quot;someImage.svg&quot;&gt;&lt;/div&gt;
                      &lt;div class=&quot;col-md-4&quot; style=&quot;border-right: white solid 0px;&quot;&gt;
                          &lt;h3&gt; Something here&lt;/h3&gt;
                          more overlay text
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>