How typeform is rendered

<template>
  <div class="scroll">
    <timer :title="title" :step="step"></timer>
    <div align="center">
      <iframe :src="typeform"
    scrolling="no" frameborder="0" allowtransparency="true" data-transparency="100" data-hide-headers=true data-hide-footer=true></iframe>
    </div>
    <custom-footer></custom-footer>
    <grey-bg/>
  </div>
</template>

<script>
import Parse from 'parse';
import Timer from './Timer';
import myMixin from '../mixins/index.js';
import quizMixin from '../mixins/quiz.js';
import Footer from '@/components/Footer'
import GreyBackgroundDarker from './GreyBackgroundDarker';
export default {
  mixins: [myMixin, quizMixin],
  components: {
    timer:Timer,
    'custom-footer': Footer,
    'grey-bg': GreyBackgroundDarker
  },
  data () {
    return {
      title: "",
      step: 0
    }
  },
  created() {
    this.renderTypeform();
    this.step = parseInt(this.getStepFromQuery());
    var setId = this.getSetIdFromQuery();
    if(setId.indexOf("S1") >= 0){
      this.title = "ROUND 1";
    }else if(setId.indexOf("S2") >= 0){
      this.title = "ROUND 2";
    }else if(setId.indexOf("S3") >= 0){
      this.title = "ROUND 3";
    }
  },
  methods: {
    handleFormSubmitDetected(){
      console.log("Quiz Tutorial detected form submit, proceed to next page");
      this.nextPage();
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .scroll {
   width: 100%;
   height: 800px;
   overflow: none;
   background-color: transparent;
  }
  iframe {
    width: 100%;
    height: 800px;
    max-width: 900px;
  }
  .scroll::-webkit-scrollbar {
    width: 10px;
  }
  .scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }
</style>