Smooth Scroll Up

by Harry Dry

HTML

<div class="existingContainer"></div>

<!-- 
I'm working on a similar effect to http://www.kanyewest.com/

On Page Load a you tube element is inserted and the window scrolls up / is pushed down making a nice effect.
On my own example, on inserting the youTube video the page automatically moves to it and there is no scroll effect :(

Any help mimicking the KanyeWest.com effect is greatly apprecaited. 
-->

CSS

.existingContainer {
  height: 100vh;
  background: pink; 
}

.newContainer {
  background: black; 
}

Babel + JSX

window.addEventListener("load", createYT);

function createYT() {
  const newContainer = document.createElement("div");
  newContainer.className = "newContainer";
  newContainer.innerHTML = `<iframe class="iFrame" src="https://www.youtube.com/embed/AQBh9soLSkI?rel=0?modestbranding=1&autoplay=1&amp;controls=0&amp;showinfo=0" frameborder="0"
  gesture="media" autoplay allow="encrypted-media" allowfullscreen></iframe>`;
  
  setTimeout(() => {
    document.body.insertAdjacentElement("afterbegin", newContainer);
    document.querySelector(".iFrame").style.width = `${window.innerWidth}px`;
    document.querySelector(".iFrame").style.height = `${window.innerHeight}px`;
  }, 1500);
}