How-to
    How To Add Google AdSense To Your Website
    How To Download Canvas as an image
    How To Embed Youtube Videos
    How To Host NodeJS Apps
    How To Host Static Websites On Amazon AWS EC2
    How To Host Static Websites On Amazon AWS S3
    How To Host Static Websites On GCP Cloud Storage
    How To Install Node.js
    How to Speed Up IntelliJ IDEA / Clion
    How to safely store API Keys

How To Embed Youtube Videos

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