How To Embed Youtube Videos

Click "Share" under the youtube video and select "Embed", copy the generated iframe code to your html.

To adjust size of the video, set width and height in iframe

<iframe
  width="560"
  height="315"
  src="..."
  frameborder="0"
  allowfullscreen
></iframe>

Setting width to "100%" does not set height accordingly, one solution is to wrap the iframe by a div:

<div class="video-wrapper">
  <iframe
    width="560"
    height="315"
    src="..."
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

and set css like this

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}