Video + transcript on side hack

Video + transcript on side hack

by Nevin Madhukar

HTML

<div class='parent-class'>
  <div class='video'>
  <iframe data-ast-element="player" class="standalone-video__iframe" src="https://www.youtube.com/embed/bCGmUCDj4Nc?autoplay=0&amp;enablejsapi=1&amp;rel=0" frameborder="0" allowfullscreen="" id="id-/content/royaldutchshell/countries/gbr/en_gb/michal/jcr:content/par/gallery/standalone-video-xslg79r6g12377n72v251m7vi"></iframe>
  </div>
  <div class='transcript'>
    <div class='transcript-inner'>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
      <p>  
      Lorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel IpsumLorel Ipsum
      </p>
    </div>
  </div>
</div>

CSS

.parent-class {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.video {
  height:0;
  padding-bottom: 56.25%;
  position: relative;
  width: 70%;
}

iframe {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.transcript {
  width: 30%;
  box-sizing: border-box;
  position: relative;
}

.transcript-inner {
 box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}