How To Embed Youtube Videos

Last Updated: 2022-02-21

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%;
}