Shopify Video Section

by zinyosrim

HTML

<div class="dc-video-row">
  <div class="dc-video-content">
    <iframe 
            src='https://player.vimeo.com/video/436703027' 
            frameborder='0' 
            webkitAllowFullScreen mozallowfullscreen allowFullScreen>         
    </iframe>
  </div>
  <div class="dc-video-description-content">
    <h2 class="dc-video-title">
      Video Title
    </h2>
    <p class="dc-video-description">
     Video description
    </p>
    <form action="https://google.com">
      <input type="submit" value="CTA" />
    </form>
  </div>
</div>

<script src="https://player.vimeo.com/api/player.js"></script>

CSS

.dc-video-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.dc-video-description-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: yellow;
  width: 100%;
}

.dc-video-description-content > * {
  margin-left: 2rem;
  margin-right: 2rem;
}

.dc-video-description-content > p {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
}

JavaScript

const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);

Promise.all([player.getVideoWidth(), player.getVideoHeight()]).then(function(dimensions) {

  let aspectRatio = dimensions[1]/dimensions[0];
  
  const videoBox = document.querySelector(".dc-video-content");
  const newVideoWidth = document.querySelector(".dc-video-row").offsetWidth/3
  videoBox.style.width =  newVideoWidth + "px";
  videoBox.style.height = newVideoWidth * aspectRatio + "px";

  iframe.width = newVideoWidth
  iframe.height = newVideoWidth * aspectRatio;
});