Video Fill Contain in All Media Views

[MNault]

Good morning!  I am wondering if there some code that I could add to this page to make the video (golf family below hero area) fill the container in all media views, even if the video gets cropped? It looks fine in desktop view but looks wonky in tablet view, and okay again in mobile view. 

http://www-hazeltinenational-com.sandbox.hs-sites.com/golf-membership?hs_preview=GaWhRjDK-4385553845...

[piersg · Accepted solution]

Hi @MNault, because the sizing is done by Wistia to maintain the aspect ratio of the video this is a bit difficult. Can you just stack it on tablet the same way you are on mobile?

You could set the height when the page loads with JS and the Wistia API (which is included on the page when you add a Wistia video):

window.addEventListener('load', (event) => {
  if (window.matchMedia('(min-width: 768px) and (max-width: 1200px)').matches) {
    var container = document.getElementById('embed_container').closest('.row-fluid').parentNode.closest('.row-fluid');
    let containerHeight = container.clientHeight;
    window._wq = window._wq || [];
    _wq.push({ id: "dqhcg7bzar", onReady: function(video) {
      video.height(containerHeight);
    }});
  }
});

Which would look like the below. Note it won't change if you resize the screen, it will only resize the video when the page loads (doing something on page resize can affect performance), but most users don't resize the window.