responsive layout - iframe

iframe-responsive.html

<style>
/* scss */
.iframe-container {
  overflow: hidden;
  position: relative;
  width: 100%;

  &:after {
    content: '';
    display: block;
    padding-top: 56.25%;
  }

  iframe {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>

<div class='iframe-container'>
  <iframe
    style='border:0;'
    src='https://www.youtube.com/embed/nKIu9yen5nc?start=149'
    width={IFRAME.WIDTH}
    height={IFRAME.HEIGHT}
    frameborder='0'
  ></iframe>
</div>

<script>
const IFRAME = {
  HEIGHT: 382,
  WIDTH: 680,
}
</script>